Make Carousel slider with Siema plugin – JavaScript

The Siema is a lightweight JavaScript plugin that adds 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


Contents

  1. Download and include
  2. Initialize
  3. Options
  4. Methods
  5. Multiples
  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>

Output

Try to slide the text.


 

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>

Output

Slide the image.


 

4. Methods

Here, are some methods –

  • next() – Go to 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>

Output


 

5. Multiple

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>

Output


 

6. Conclusion

The plugin can add 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 elements 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 +
Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *