ミギムキ

[ツール] bxSliderのスライドをゆっくりズームしながら切り替えたい

html

<ul class="zoom_slider"> <li><img src="./images/slide_01.jpg" alt="スライド1枚目"></li> <li><img src="./images/slide_02.jpg" alt="スライド2枚目"></li> <li><img src="./images/slide_03.jpg" alt="スライド3枚目"></li> </ul>
スポンサー広告

CSS

.zoom_slider > li[aria-hidden="false"] { animation: anime_zoom 4s linear; } .zoom_slider > li[aria-hidden="true"] { transform: scale(1.2); } @keyframes anime_zoom { 0% { transform: scale(1.0); } 100% { transform: scale(1.2); } }

jQuery

jQuery(function($){ $('.zoom_slider').bxSlider({ auto: true, pager: false, controls: false, mode: 'fade', speed: 1000, pause: 4000, }); });