Q&A
前提
Bootstrapベースのテンプレート「Titan」のスライド切り替え間隔についてお伺いします。
テンプレート集サイトで紹介されているbootstrapをベースにしたテンプレート「Titan」 https://themewagon.com/themes/titan/
を使用して、サイト作成を進めています。
トップページのテンプレート（index_mp_fullscreen_flexslider.html）で画像が一定間隔（約6秒）で切り替わるスライドショーが設置されています。
実現したいこと
スライドショーの切り替え間隔を変更（約6秒→約4秒）するためには、どうすれば良いでしょうか。
該当のソースコード
HTML<ヘッダー>
1 <head> 2 <meta charset="utf-8"> 3 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <!-- 6 Document Title 7 ============================================= 8 --> 9 <title>Titan | Multipurpose HTML5 Template</title> 10 <!-- 11 Favicons 12 ============================================= 13 --> 14 <link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicons/apple-icon-57x57.png"> 15 <link rel="apple-touch-icon" sizes="60x60" href="assets/images/favicons/apple-icon-60x60.png"> 16 <link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicons/apple-icon-72x72.png"> 17 <link rel="apple-touch-icon" sizes="76x76" href="assets/images/favicons/apple-icon-76x76.png"> 18 <link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicons/apple-icon-114x114.png"> 19 <link rel="apple-touch-icon" sizes="120x120" href="assets/images/favicons/apple-icon-120x120.png"> 20 <link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-icon-144x144.png"> 21 <link rel="apple-touch-icon" sizes="152x152" href="assets/images/favicons/apple-icon-152x152.png"> 22 <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-icon-180x180.png"> 23 <link rel="icon" type="image/png" sizes="192x192" href="assets/images/favicons/android-icon-192x192.png"> 24 <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png"> 25 <link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicons/favicon-96x96.png"> 26 <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png"> 27 <link rel="manifest" href="/manifest.json"> 28 <meta name="msapplication-TileColor" content="#ffffff"> 29 <meta name="msapplication-TileImage" content="assets/images/favicons/ms-icon-144x144.png"> 30 <meta name="theme-color" content="#ffffff"> 31 <!-- 32 Stylesheets 33 ============================================= 34 35 --> 36 <!-- Default stylesheets--> 37 <link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 38 <!-- Template specific stylesheets--> 39 <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet"> 40 <link href="https://fonts.googleapis.com/css?family=Volkhov:400i" rel="stylesheet"> 41 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet"> 42 <link href="assets/lib/animate.css/animate.css" rel="stylesheet"> 43 <link href="assets/lib/components-font-awesome/css/font-awesome.min.css" rel="stylesheet"> 44 <link href="assets/lib/et-line-font/et-line-font.css" rel="stylesheet"> 45 <link href="assets/lib/flexslider/flexslider.css" rel="stylesheet"> 46 <link href="assets/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet"> 47 <link href="assets/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet"> 48 <link href="assets/lib/magnific-popup/dist/magnific-popup.css" rel="stylesheet"> 49 <link href="assets/lib/simple-text-rotator/simpletextrotator.css" rel="stylesheet"> 50 <!-- Main stylesheet and color file--> 51 <link href="assets/css/style.css" rel="stylesheet"> 52 <link id="color-scheme" href="assets/css/colors/default.css" rel="stylesheet"> 53 </head>
HTML＜スライダー＞
1 <section class="home-section home-parallax home-fade home-full-height" id="home"> 2 <div class="hero-slider"> 3 <ul class="slides"> 4 <li class="bg-dark-30 bg-dark" style="background-image:url(assets/images/section-8.jpg);"> 5 <div class="titan-caption"> 6 <div class="caption-content"> 7 <div class="font-alt mb-30 titan-title-size-1">Hello & welcome</div> 8 <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> 9 </div> 10 </div> 11 </li> 12 <li class="bg-dark-30 bg-dark" style="background-image:url(assets/images/section-9.jpg);"> 13 <div class="titan-caption"> 14 <div class="caption-content"> 15 <div class="font-alt mb-30 titan-title-size-2">Titan is creative multipurpose html template for<br/>web developers who change the world 16 </div><a class="btn btn-border-w btn-round" href="about">Learn More</a> 17 </div> 18 </div> 19 </li> 20 <li class="bg-dark-30 bg-dark" style="background-image:url(assets/images/section-10.jpg);"> 21 <div class="titan-caption"> 22 <div class="caption-content"> 23 <div class="font-alt mb-30 titan-title-size-1">We build brands that build business</div> 24 <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> 25 </div> 26 </div> 27 </li> 28 </ul> 29 </div> 30 </section>
CSS
1/*-------------------------------------------------------------- 2 Slider & Carousel 3--------------------------------------------------------------*/ 4/* ------------------------------------------------------------------- 5General Styles - FlexSlider 6------------------------------------------------------------------- */ 7.flex-direction-nav a, 8.flex-control-nav > li > a { 9 transition: all 0.3s ease-in-out 0s; 10} 11 12.flex-direction-nav a { 13 position: absolute; 14 display: block; 15 height: 100%; 16 width: 50%; 17 top: 0; 18 z-index: 10; 19 overflow: hidden; 20 opacity: 0; 21 margin: 0; 22} 23 24.flex-direction-nav .flex-prev { 25 opacity: 0; 26 left: 0; 27 cursor: url(../images/prev-light.png), e-resize; 28} 29 30.flex-direction-nav .flex-next { 31 opacity: 0; 32 right: 0; 33 cursor: url(../images/next-light.png), e-resize; 34} 35 36.flex-control-nav { 37 position: absolute; 38 width: auto; 39 left: 50%; 40 bottom: 20px; 41 z-index: 11; 42 text-align: center; 43 -webkit-transform: translateX(-50%); 44 -ms-transform: translateX(-50%); 45 transform: translateX(-50%); 46} 47 48.flex-control-nav > li { 49 display: inline-block; 50 margin: 5px 3px; 51} 52 53.flex-control-nav > li > a { 54 background: transparent; 55 border: 1px solid #fff; 56 display: block; 57 height: 6px; 58 width: 6px; 59 border-radius: 6px; 60} 61 62.flex-control-nav > li > a:hover, 63.flex-control-nav > li > a.flex-active { 64 background: #fff; 65} 66 67/* ------------------------------------------------------------------- 68Hero Slider 69------------------------------------------------------------------- */ 70.hero-slider { 71 margin: 0 !important; 72} 73 74.hero-slider .slides > li { 75 display: none; 76 -webkit-backface-visibility: hidden; 77} 78 79.hero-slider, 80.hero-slider .flex-viewport { 81 height: 100% !important; 82 width: 100%; 83 padding: 0; 84 margin: 0; 85} 86 87.hero-slider .slides { 88 height: 100% !important; 89 transition-delay: 1s; 90} 91 92.hero-slider .flex-direction-nav a { 93 width: 15%; 94} 95 96.hero-slider .slides li { 97 background-size: cover; 98 background-position: center center; 99 background-repeat: no-repeat; 100 height: 100% !important; 101 width: 100%; 102 padding: 0; 103 margin: 0; 104 -webkit-background-size: cover; 105 -moz-background-size: cover; 106 -o-background-size: cover; 107} 108 109/* Caption */ 110.titan-caption { 111 position: relative; 112 display: table; 113 height: 100%; 114 width: 70%; 115 margin: 0 auto; 116} 117 118.titan-caption { 119 position: relative; 120 display: table; 121 height: 100%; 122 width: 100%; 123 margin: 0 auto; 124} 125 126.caption-content { 127 display: table-cell; 128 vertical-align: middle; 129 text-align: center; 130} 131 132/* 133Photography Page Slider 134*/ 135.photography-page .image-caption { 136 bottom: 20px; 137 position: absolute; 138 width: 35%; 139} 140 141.photography-page .image-caption .caption-text { 142 font-size: 24px; 143 text-transform: capitalize; 144 letter-spacing: 1px; 145} 146 147.photography-page .flex-control-nav { 148 left: 80%; 149 bottom: 20px; 150 z-index: 11; 151}
試したこと
hero-sliderやslidesなどのクラスを定義している外部CSSファイル内を見ても、スライド間隔にかかわる部分をみつけられませんでした。（私の知識不足のせいもあるかもしれません）スライドの切り替え間隔がトランジションで約1秒、表示時間約5秒なので、5sなどの記述がどこかにあるかと予想していたのですが、、、
回答1件
0
ベストアンサー
質問に記載された HTML に
<link href="assets/lib/flexslider/flexslider.css" rel="stylesheet">
とあるので、質問に記載されていない部分のどこかで jquery.flexslider.js を読み込んでいたりしないでしょうか。
FlexSlider と仮定すると 質問に記載されていない JavaScript の中のどこかに、
$('クラス名').flexslider( { // flexslider のパラメータ設定 } );
のような部分があると思います。 ( クラス名は、 .hero-slider でしょうか。 )
その中の slideshowSpeed のパラメータを変更してみてください。 1000 で 1秒ぐらいの感じだったと思います。
見つかった $('クラス名').flexslider({ 〜 }); の中に slideshowSpeed 見つからない場合は、省略時のデフォルト値で動作していますので、slideshowSpeed: 4000, の用な感じで項目を追加してみてください。
FlexSlider のドキュメントをみると
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
とありますね。単位は 1ミリ秒ということですので、 1000 で1秒です。(省略時のデフォルト時間は、 7秒のようです。)
投稿2022/07/22 04:12
総合スコア25234
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/22 06:16
2022/07/22 11:29 編集
2022/07/22 15:55