質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

Bootstrapベースのテンプレート「Titan」のスライド切り替え間隔を変えたい

Suzukis
Suzukis

総合スコア1

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0リアクション

0クリップ

213閲覧

投稿2022/07/22 03:36

前提

Bootstrapベースのテンプレート「Titan」のスライド切り替え間隔についてお伺いします。
テンプレート集サイトで紹介されているbootstrapをベースにしたテンプレート「Titan」 https://themewagon.com/themes/titan/
を使用して、サイト作成を進めています。
トップページのテンプレート(index_mp_fullscreen_flexslider.html)で画像が一定間隔(約6秒)で切り替わるスライドショーが設置されています。

実現したいこと

スライドショーの切り替え間隔を変更(約6秒→約4秒)するためには、どうすれば良いでしょうか。

該当のソースコード

HTML<ヘッダー>

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Document Title ============================================= --> <title>Titan | Multipurpose HTML5 Template</title> <!-- Favicons ============================================= --> <link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicons/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="assets/images/favicons/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicons/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="assets/images/favicons/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicons/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="assets/images/favicons/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="assets/images/favicons/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="assets/images/favicons/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicons/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="assets/images/favicons/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff"> <!-- Stylesheets ============================================= --> <!-- Default stylesheets--> <link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Template specific stylesheets--> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Volkhov:400i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet"> <link href="assets/lib/animate.css/animate.css" rel="stylesheet"> <link href="assets/lib/components-font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="assets/lib/et-line-font/et-line-font.css" rel="stylesheet"> <link href="assets/lib/flexslider/flexslider.css" rel="stylesheet"> <link href="assets/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet"> <link href="assets/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet"> <link href="assets/lib/magnific-popup/dist/magnific-popup.css" rel="stylesheet"> <link href="assets/lib/simple-text-rotator/simpletextrotator.css" rel="stylesheet"> <!-- Main stylesheet and color file--> <link href="assets/css/style.css" rel="stylesheet"> <link id="color-scheme" href="assets/css/colors/default.css" rel="stylesheet"> </head>

HTML<スライダー>

<section class="home-section home-parallax home-fade home-full-height" id="home"> <div class="hero-slider"> <ul class="slides"> <li class="bg-dark-30 bg-dark" style="background-image:url(assets/images/section-8.jpg);"> <div class="titan-caption"> <div class="caption-content"> <div class="font-alt mb-30 titan-title-size-1">Hello &amp; welcome</div> <div class="font-alt mb-40 titan-title-size-4">We are Titan</div><a class="section-scroll btn btn-border-w btn-round" href="#about">Learn More</a> </div> </div> </li> <li class="bg-dark-30 bg-dark" style="background-image:url(assets/images/section-9.jpg);"> <div class="titan-caption"> <div class="caption-content"> <div class="font-alt mb-30 titan-title-size-2">Titan is creative multipurpose html template for<br/>web developers who change the world </div><a class="btn btn-border-w btn-round" href="about">Learn More</a> </div> </div> </li> <li class="bg-dark-30 bg-dark" style="background-image:url(assets/images/section-10.jpg);"> <div class="titan-caption"> <div class="caption-content"> <div class="font-alt mb-30 titan-title-size-1">We build brands that build business</div> <div class="font-alt mb-40 titan-title-size-3">We are Amazing</div><a class="section-scroll btn btn-border-w btn-round" href="#about">Learn More</a> </div> </div> </li> </ul> </div> </section>

CSS

/*-------------------------------------------------------------- Slider & Carousel --------------------------------------------------------------*/ /* ------------------------------------------------------------------- General Styles - FlexSlider ------------------------------------------------------------------- */ .flex-direction-nav a, .flex-control-nav > li > a { transition: all 0.3s ease-in-out 0s; } .flex-direction-nav a { position: absolute; display: block; height: 100%; width: 50%; top: 0; z-index: 10; overflow: hidden; opacity: 0; margin: 0; } .flex-direction-nav .flex-prev { opacity: 0; left: 0; cursor: url(../images/prev-light.png), e-resize; } .flex-direction-nav .flex-next { opacity: 0; right: 0; cursor: url(../images/next-light.png), e-resize; } .flex-control-nav { position: absolute; width: auto; left: 50%; bottom: 20px; z-index: 11; text-align: center; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .flex-control-nav > li { display: inline-block; margin: 5px 3px; } .flex-control-nav > li > a { background: transparent; border: 1px solid #fff; display: block; height: 6px; width: 6px; border-radius: 6px; } .flex-control-nav > li > a:hover, .flex-control-nav > li > a.flex-active { background: #fff; } /* ------------------------------------------------------------------- Hero Slider ------------------------------------------------------------------- */ .hero-slider { margin: 0 !important; } .hero-slider .slides > li { display: none; -webkit-backface-visibility: hidden; } .hero-slider, .hero-slider .flex-viewport { height: 100% !important; width: 100%; padding: 0; margin: 0; } .hero-slider .slides { height: 100% !important; transition-delay: 1s; } .hero-slider .flex-direction-nav a { width: 15%; } .hero-slider .slides li { background-size: cover; background-position: center center; background-repeat: no-repeat; height: 100% !important; width: 100%; padding: 0; margin: 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } /* Caption */ .titan-caption { position: relative; display: table; height: 100%; width: 70%; margin: 0 auto; } .titan-caption { position: relative; display: table; height: 100%; width: 100%; margin: 0 auto; } .caption-content { display: table-cell; vertical-align: middle; text-align: center; } /* Photography Page Slider */ .photography-page .image-caption { bottom: 20px; position: absolute; width: 35%; } .photography-page .image-caption .caption-text { font-size: 24px; text-transform: capitalize; letter-spacing: 1px; } .photography-page .flex-control-nav { left: 80%; bottom: 20px; z-index: 11; }

試したこと

hero-sliderやslidesなどのクラスを定義している外部CSSファイル内を見ても、スライド間隔にかかわる部分をみつけられませんでした。(私の知識不足のせいもあるかもしれません)スライドの切り替え間隔がトランジションで約1秒、表示時間約5秒なので、5sなどの記述がどこかにあるかと予想していたのですが、、、

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。