前提・実現したいこと
同じページ内で全く違うデザインのスライダーを二つ作りたいです。
一つ目は完成したのですが、二つ目を表示させようとすると一つ目に作ったスライダーのcssが反映されてしまいうまく表示されません。一つ目と二つ目のcssを完全に分けて作業したいのですがいい方法はありますでしょうか??( ; ; )
cssはslick.cssに直接書いてます。
お手数おかけしますが、よろしくお願いいたします。
該当のソースコード
html
1<div class="slider"> 2 <div> 3 4 中略 5 6 <img alt="Alt" src="images/top_kv1-1.jpg" /> 7 </div> 8 <div> 9 10 中略 11 12 <img alt="Alt" src="images/top_kv1-1.jpg" /> 13 </div> 14 <div> 15 16 中略 17 18 <img alt="Alt" src="images/top_kv1-1.jpg" /> 19 </div> 20 <div> 21 22 中略 23 24 <img alt="Alt" src="images/top_kv1-1.jpg" /> 25 </div> 26</div> 27 28<ul class="slider2"> 29 <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li> 30 <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li> 31 <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li> 32 <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li> 33 <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li> 34</ul>
css
1/* Slider */ 2.slider-wrapper{ 3 position: relative; 4 overflow: hidden; 5 width: 100%; 6 7 } 8 9 10 .slick-list { 11 position: relative; 12 overflow: hidden; 13 display: block; 14 margin: 0; 15 padding: 0; 16 } 17 18 .slick-list:focus { 19 outline: none; 20 } 21 22 .slick-list.dragging { 23 cursor: pointer; 24 cursor: hand; 25 } 26 27 .slick-slider .slick-list, 28 .slick-track, 29 .slick-slide, 30 .slick-slide img { 31 height: 100vh; 32 object-fit: cover; 33 } 34 35 .slick-track { 36 position: relative; 37 left: 0; 38 top: 0; 39 display: block; 40 zoom: 1; 41 } 42 43 .slick-track:before, 44 .slick-track:after { 45 content: ""; 46 display: table; 47 } 48 49 .slick-track:after { 50 clear: both; 51 } 52 53 .slick-loading .slick-track { 54 visibility: hidden; 55 } 56 57 .slick-slide { 58 float: left; 59 height: 100%; 60 min-height: 1px; 61 display: none; 62 } 63 64 .slick-slide img { 65 width: 100%; 66 height: 100vh; 67 margin-top: 82px; 68 } 69 70 .slick-slide.dragging img { 71 pointer-events: none; 72 width: 100%; 73 height: 100vh; 74 } 75 76 .slick-initialized .slick-slide { 77 display: block; 78 } 79 80 .slick-loading .slick-slide { 81 visibility: hidden; 82 } 83 84 .slick-vertical .slick-slide { 85 display: block; 86 height: auto; 87 border: 1px solid transparent; 88 } 89 90 .slick-slide > .slick-slider-img { 91 position: relative; 92 display: block; 93 width: 100%; 94 height: 100vh; 95 } 96 97 .slick-slide .image { 98 /*height: 180px;*/ 99 height: 100vh; 100 width: 100%; 101 margin: 0 auto; 102 } 103 104 .slick-slide img { 105 display: block; 106 width: 100%; 107 height: 100vh; 108 } 109 110 .slick-slide img.slick-loading { 111 display: none; 112 } 113 114 115 .slick-prev{ 116 width: 65px; 117 border: none; 118 border-radius: none; 119 position: absolute; 120 top: 50%; 121 transform: translateY(-20%); 122 left: 115px; 123 padding: 0.25em 0.5em; 124 z-index: 400; 125 } 126 127 .slick-next{ 128 width: 65px; 129 border: none; 130 border-radius: none; 131 position: absolute; 132 top: 50%; 133 transform: translateY(-20%); 134 right: 115px; 135 padding: 0.25em 0.5em; 136 z-index: 400; 137 }
js
1$(document).ready(function() { 2 3 const barColors = ['#fff', '#fff', '#fff','#fff']; 4 5 $.fn.startBar = function(index) { 6 this 7 .eq(index) 8 .css({ backgroundColor: barColors[index]}) 9 .animate({ width: '100%' }, 3400 ); 10 } 11 12 $('.slider').slick({ 13 autoplay: true, 14 arrows: true, 15 dots: false, 16 speed: 800, 17 autoplaySpeed: 3000, 18 prevArrow: '<img src="images/slick-prev.svg" class="slide-arrow slick-prev">', 19 nextArrow: '<img src="images/slick-next.svg" class="slide-arrow slick-next">', 20 adaptiveHeight: true 21 }).on('afterChange', function(event, slick, currentSlide) { 22 if (currentSlide === 0) 23 $('.bar').startBar(currentSlide); 24 $('.bar').css({width: 0}).startBar(currentSlide); 25 $('.bar').css({width: 0}); 26 }); 27 $('.bar').startBar(0); 28 29 30 31 32 33 $('.slider2').slick({ 34 autoplay: true, 35 dots: false, 36 speed: 800, 37 autoplaySpeed: 3000, 38 adaptiveHeight: true 39 }) 40 41});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/27 09:13