Skip to content

Instantly share code, notes, and snippets.

@pavelblednov

pavelblednov/swiperinit.html

Last active August 2, 2024 07:53
Show Gist options
  • Save pavelblednov/1ab7debae9fa9ee275d914ba04ffe7d4 to your computer and use it in GitHub Desktop.
Save pavelblednov/1ab7debae9fa9ee275d914ba04ffe7d4 to your computer and use it in GitHub Desktop.
Download ZIP
Swiper Initialization with data attributes
Raw
swiperinit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<!-- Demo styles -->
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin: 20px 0;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container" data-swiper='{"initialSlide": 5, "slidesPerView": 3, "centeredSlides": true, "autoplay": {"delay": 2000}, "speed": 1000, "spaceBetween": 30, "pagination": {"el": ".swiper-pagination", "clickable": true} }'>
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination1"></div>
</div>
<!-- Swiper -->
<div class="swiper-container" data-swiper='{"spaceBetween": 40, "pagination": {"el": ".swiper-pagination", "clickable": true} }'>
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination2"></div>
</div>
<!-- Swiper -->
<div class="swiper-container" data-swiper='{"observer":false, "spaceBetween": 50, "pagination": {"el": ".swiper-pagination", "clickable": true} }'>
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination3"></div>
</div>
<!-- jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
// var swiper1 = new Swiper('.swiper1', {
// spaceBetween: 30,
// pagination: {
// el: '.swiper-pagination1',
// clickable: true,
// },
// });
// var swiper2 = new Swiper('.swiper2', {
// spaceBetween: 30,
// pagination: {
// el: '.swiper-pagination2',
// clickable: true,
// },
// });
// var swiper3 = new Swiper('.swiper3', {
// spaceBetween: 30,
// pagination: {
// el: '.swiper-pagination3',
// clickable: true,
// },
// });
var sliderSelector = '.swiper-container',
defaultOptions = {
breakpointsInverse: true,
observer: true
};
/* jquery version */
$(document).ready(function () {
// var jSlider = $(sliderSelector);
// jSlider.each(function (i , slider ) {
// var data = $(slider).attr('data-swiper') || {};
// if ( data )
// {
// var dataOptions = JSON.parse(data);
// }
// slider.options = $.extend({}, defaultOptions, dataOptions);
// console.log(slider.options)
// var swiper = new Swiper(slider, slider.options);
// /* stop on hover */
// if ( typeof slider.options.autoplay !== 'undefined' )
// {
// $(slider).hover(function(){
// swiper.autoplay.stop();
// console.log('stop')
// }, function(){
// swiper.autoplay.start();
// console.log('start')
// });
// }
// });
});
var nSlider = document.querySelectorAll(sliderSelector);
[].forEach.call(nSlider, function( slider, index, arr )
{
var data = slider.getAttribute('data-swiper') || {};
if (data)
{
var dataOptions = JSON.parse(data);
}
slider.options = Object.assign({}, defaultOptions, dataOptions);
var swiper = new Swiper(slider, slider.options);
console.log(slider.options.autoplay)
/* stop on hover */
if ( typeof slider.options.autoplay !== 'undefined' && slider.options.autoplay !== false )
{
slider.addEventListener('mouseenter', function(e) {
swiper.autoplay.stop();
console.log('stop')
});
slider.addEventListener('mouseleave', function(e) {
swiper.autoplay.start();
console.log('start')
});
}
});
</script>
</body>
</html>
@mszzarei
Copy link

Hello. How can I use it for thumbs mode? Do you have a demo of this mode? using data attribute.

@aaronmiller-ehouse
Copy link

Good approach!

@mmd2sh
Copy link

mmd2sh commented Aug 2, 2024 •
edited
Loading

just use this code.

$('[data-swiper]').each(function() {
        try {
            let options = $(this).attr('data-swiper');
            eval('options=' + options);
            new Swiper(this, options);
        } catch(err) {
            console.error('Check swiper options', err);
        }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment