Make Carousel slider with Siema plugin – JavaScript

Last updated on by

The Siema is a lightweight JavaScript plugin that adds a carousel slider on the page. It is not dependent on any other plugins and not require to do any styling.

It is easy to setup on the page.

Few options and methods are available for customization.

Make Carousel slider with Siema plugin - JavaScript

Download

Contents

  1. Download and include
  2. Initialize
  3. Options
  4. Methods
  5. Multiple Slider
  6. Conclusion

1. Download and include

  • Download the plugin from Github.
  • Include siema.min.js script at the end of <body>.
<script src="siema/dist/siema.min.js" type="text/javascript"></script>

2. Initialize

  • Create a <div class='siema'> container and put your elements in it.

In the example, I added <p> elements in the container you can use any other HTML elements – <div>, <h1>, <span>,<img> etc.

  • Create an object of Siema() Class.
<div class="siema">
   <p>Slide 1</p>
   <p>Slide 2</p>
   <p>Slide 3</p>
   <p>Slide 4</p>
</div>
<script src="siema/dist/siema.min.js" type="text/javascript"></script>
<script>
   new Siema();
</script>

View Demo

3. Options

Here, some options –

  • selector –  Specify your selector. The default value is .seima. e.g. selector: '#images'
  • duration – This set slide transition duration. It takes value in milliseconds. The default value is 200. e.g. duration: 2000
  • perPage – Specify how many elements do you want to show at a time. The default value is 1. e.g. perPage: 2
  • startIndex – Starting index of the slide. The default value is 0. e.g. startIndex: 1
  • draggable –  Set whether touch swipe enables or not. The default value is true. e.g. draggable: false
  • threshold – Threshold for touch and mouse dragging. It takes value in px and the default value is 20. e.g. threshold: 80
  • loop – The slider back to the first slide when performing slide from the last slide. The default value is false. e.g. loop: true.

Example

<div id="images">
   <img src='images/image1.jpg'>
   <img src='images/image2.jpg'>
   <img src='images/image3.jpg'>
   <img src='images/image4.jpg'>
</div>

<script src="siema/dist/siema.min.js" type="text/javascript"></script>
<script>
 
new Siema({
   selector: '#images',
   duration: 2000,
   startIndex: 1,
   threshold: 80,
   loop: true 
});

</script>

View Demo

4. Methods

Here, are some methods –

  • next() – Go to the next slide and it takes a number of slides as an optional parameter. The default value is 1.

Syntax –

next([howManySlides])

Example

const siemaEl = new Siema();
siemaEl.next(2);
  • prev() – Go to the previous slide and it takes a number of slides as an optional parameter. The default value is 1.

Syntax –

prev([howManySlides])

Example

const siemaEl = new Siema();
siemaEl.prev(2);
  • goTo() – Go to the specified slide. This takes slide index as a parameter.

Syntax –

goTo(index)

Example

const siemaEl = new Siema();
siemaEl.goTo(2);
  • destroy() – Remove all active listener.

Syntax –

destroy()

Example

const siemaEl = new Siema();
siemaEl.destroy();
  • currentSlide – Returns current active slide index.

Example

const siemaEl = new Siema();
var pos = siemaEl.currentSlide;

Completed Code

<div class='siema'>
   <img src='images/image1.jpg' >
   <img src='images/image2.jpg'>
   <img src='images/image3.jpg'>
   <img src='images/image4.jpg'>
</div>
<input type='button' value='Previous' id='prev' onclick='prevSlide();' > <input type='button' value='Next' id='next' onclick='nextSlide();' > 
 
Goto : <select id='goto' onchange='gotoSlide();'>
   <option value='0'>1</option>
   <option value='1'>2</option>
   <option value='2'>3</option>
   <option value='3'>4</option>
 </select>
 <br/>
<span id='slideno'>0</span> Current slide

<script src="siema/dist/siema.min.js" type="text/javascript"></script>
<script>
// Initialize
const siemaEl = new Siema();

// Current position
function currentPos(){
   document.getElementById('slideno').innerHTML = siemaEl.currentSlide;
}

// Previous slide
function prevSlide(){
   siemaEl.prev();
   currentPos();
}

// Next slide
function nextSlide(){
   siemaEl.next();
   currentPos();
}

// Goto
function gotoSlide(){
   var pos = document.getElementById('goto').value;
   siemaEl.goTo(pos);
   currentPos();
}
</script>

View Demo

5. Multiple Slider

You need to separately initialize the Siema() Class object if you like to use it on multiple carousel slider.

For example, If both elements have the same class and when you define the Siema() object then it will don’t initialize the second element.

Completed Code

In the example, I am creating two carousel slider and initializing them separately.

<!-- First -->
<div class="siema">
   <p>Slide 1</p>
   <p>Slide 2</p>
   <p>Slide 3</p>
   <p>Slide 4</p>
</div>

<!-- Second -->
<div id="images">
   <img src='images/image1.jpg'>
   <img src='images/image2.jpg'>
   <img src='images/image3.jpg'>
   <img src='images/image4.jpg'>
</div>

<script src="siema/dist/siema.min.js" type="text/javascript"></script>
<script>
// Initialize first
new Siema();

 // Initialize second
new Siema({
   selector: '#images'
});

</script>

View Demo

6. Conclusion

The plugin can add a carousel effect on image, video, or HTML elements. It is not dependent on any other external library.

It doesn’t have many customization options.

If you would add more than one carousel slider element then you need to initiate them separately with the different selector.

Browser support –

  • IE10 +
  • Edge
  • Chrome 12 +
  • Firefox 16 +
  • Opera 15 +
  • Safari 4 +
  • Android Browser 4.0 +
  • iOS Safari 6.0 +
If you found this tutorial helpful then don't forget to share.

2 thoughts on “Make Carousel slider with Siema plugin – JavaScript”

Leave a Comment

© 2016-2023 Makitweb, All rights reserved