Skip to content

Instantly share code, notes, and snippets.

@anilkay

anilkay/splide_example.html

Created October 2, 2022 21:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anilkay/f922283ad98f4d7425edff22583177b0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anilkay/f922283ad98f4d7425edff22583177b0 to your computer and use it in GitHub Desktop.
Download ZIP
example of splide.js
Raw
splide_example.html
<html>
<head>
<title>Splida.js Examples</title>
<!--https://splidejs.com-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/splide.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/themes/splide-skyblue.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
<div style="height: 40%;">
<section class="splide" id="first_slide" aria-label="Splide Basic HTML Example">
<div class="splide__slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
</div>
<div class="splide__controls">
<button class="splide__toggle" type="button">
<span class="splide__toggle__play">Play</span>
<span class="splide__toggle__pause">Pause</span>
</button>
</div>
<div class="splide__progress">
<div class="splide__progress__bar">
</div>
</div>
</section>
</div>
<div style="height: 40%; margin: 10%;">
<section id="second_slide" class="splide" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">İkinci</li>
<li class="splide__slide">Üçünçü</li>
<li class="splide__slide">Dördüncü</li>
</ul>
</div>
</section>
</div>
</body>
<script>
new Splide("#first_slide",{
type:"loop",
perPage: 2,
autoplay:true, //Autoplay also works just fine.
interval:5000, //Autoplay interval in miliseconds.
pauseOnHover:false //Good Feature pause on hover in default.
}).mount();
new Splide("#second_slide").mount();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment