Swiper Slider is a responsive jQuery plugin used for creating sliders on websites.
Following the below steps, you will learn how to set up jQuery Swiper Slider on your website.
Reference site: Click Here
Step 1: Include jQuery and Swipe Slider Libraries:
Make sure you have both the jQuery library and the Swipe Slider plugin included in your project.
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include the Swipe Slider jQuery Plugin -->
<link rel="stylesheet" href="path/to/your/swipe-slider.css">
<script src="path/to/your/jquery.swipeSlider.min.js"></script>
Step 2: Inside the HTML Structure:
Create an HTML structure for your Swipe Slider. Wrap your slider items in a container with a class, such as swipe-slider.
<div class="swipe-slider">
<div class="swipe-slide">Slide 1</div>
<div class="swipe-slide">Slide 2</div>
<div class="swipe-slide">Slide 3</div>
</div>
Step 3: Initialize the Swipe Slider with jQuery:
After your HTML structure is in place, initialize the Swipe Slider in your <script> tag:
<script>
$(document).ready(function(){
$('.swipe-slider').swipeSlider({
// Custom options
speed: 500, // Slide transition speed
autoPlay: true, // Automatically slide
interval: 3000, // Time between slides
loop: true, // Loop through slides
swipeThreshold: 50, // Swipe distance threshold for sliding
});
});
</script>
Explanation:
You can customize the carousel with various options. Some useful ones are:
- speed: Transition speed for sliding (in milliseconds).
- autoPlay: If true, slides automatically transition.
- interval: Time (in milliseconds) between automatic transitions.
- loop: If true, the slider will loop back to the first slide after the last one.
- swipeThreshold: The minimum swipe distance required to move the slider.
By using OWL Carousel, you can create attractive and responsive slide designs on your website.
