8kb js 4kb css kodu ile tam donanımlı carousel kullanın...
Basit kullanımda ileri ve geri butonları ile kullanımını göreceksiniz. Bu ve diğer kullanımlarını gördükten sonra carousel'in ne kadar kolay ve performanslı olduğunu göreceksiniz.
codepen linki'ne giderek önizleyebilirsiniz...
<div class="carousel-slider" id="basic">
<div class="carousel-content">
<aside class="slide-item">slide 1</aside>
<aside class="slide-item">slide 2</aside>
<aside class="slide-item">slide 3</aside>
<aside class="slide-item">slide 4</aside>
<aside class="slide-item">slide 5</aside>
</div>
<button class="carousel-prev-btn"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
<button class="carousel-next-btn"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
</div>Pagination kullanmak için iki yolunuz var.
- Js içinde özelleştirdiğiniz sliderınıza parametre olarak pagination:true eklemeniz
- html içinde sliderınızı bulum carousel-content kısmına yeni bir data-pagination="true" attr'sini eklemek
Gördüğünüz gibi pagination'ı aktif etmek bu kadar basit...
codepen linki'ne giderek önizleyebilirsiniz...
<div class="carousel-slider" id="pagination">
<div class="carousel-content" data-pagination="true">
<aside class="slide-item">slide 1</aside>
<aside class="slide-item">slide 2</aside>
<aside class="slide-item">slide 3</aside>
<aside class="slide-item">slide 4</aside>
<aside class="slide-item">slide 5</aside>
</div>
<div class="carousel-pagination stick"></div>
// stick veya
<div class="carousel-pagination"></div>//yuvarlak ayarlı olarak kullanın
</div>Grid kullanmak için iki yolunuz var.
- Js içinde özelleştirdiğiniz sliderınıza parametre olarak grid:{xl:'',lg:'',md:'',sm:''} eklemeniz
- html içinde sliderınızı bulum carousel-content kısmına yeni bir data-grid="{xl:'',lg:'',md:'',sm:''}" attr'sini eklemek
Gördüğünüz gibi grid sistemini aktif etmek bu kadar basit...
codepen linki'ne giderek önizleyebilirsiniz...
<div class="carousel-slider" id="responsive">
<div class="carousel-content" data-grid='{"xl":4,"lg":3,"md":2,"sm":1}' data-pagination="true">
<aside class="slide-item">slide 1</aside>
<aside class="slide-item">slide 2</aside>
<aside class="slide-item">slide 3</aside>
<aside class="slide-item">slide 4</aside>
<aside class="slide-item">slide 5</aside>
</div>
<button class="carousel-prev-btn"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
<button class="carousel-next-btn"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
<div class="carousel-pagination stick"></div>
</div>Autoplay kullanmak için iki yolunuz var.
- Js içinde özelleştirdiğiniz sliderınıza parametre olarak autoplay:{playTimer:5000} eklemeniz
- html içinde sliderınızı bulum carousel-slider kısmına yeni bir data-autoplay="true" data-timer="geçiş süresi örnek(5000)" attr'sini eklemek
Gördüğünüz gibi Autoplay sistemini aktif etmek bu kadar basit...
codepen linki'ne giderek önizleyebilirsiniz...
<div class="carousel-slider" id="autoplay" data-autoplay="true" data-timer="4000">
<div class="carousel-content" data-pagination="true">
<aside class="slide-item">slide 1</aside>
<aside class="slide-item">slide 2</aside>
<aside class="slide-item">slide 3</aside>
<aside class="slide-item">slide 4</aside>
<aside class="slide-item">slide 5</aside>
</div>
<button class="carousel-prev-btn"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
<button class="carousel-next-btn"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
<div class="carousel-pagination stick"></div>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent