1. Home
  2. Marco HTML
  3. Homepage
  4. Sliders

Sliders

MarcoTheme uses “Vegas2 Background Slideshow” and “Swiper” sliders and to handle all slider behaviour including image sliders and text sliders. The appearance of the slider will depend on which class you use to initialize it. “Vegas2” slider was used in Home 1 (index.html). “Swiper” slider was used in “Home2” (home2.html). There is centered slides with auto slides per view.


Vegas2 slider

 

Information

“Vegas” is a jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.


Structure

Slider elements are always structured as so:
 

 ...
   <div class="home-bg-slider slider-full autoplay">
      <div class="home-overlay active-overlay"></div>
      <div class="home-slider-container">

        SLIDES
        <span class="single-slide" data-slide="#image"></span>
	<span class="single-slide" data-slide="#image"></span>
	<span class="single-slide" data-slide="#image"></span>

      </div>
      <div class="home-slider-arrows show-for-large">
         <div class="arrow-prev">
	   (icon left arrow)
         </div>
         <div class="arrow-next">
	   (icon right arrow)
         </div>
      </div>
...

 
To add slides, simply replace #image to desired image url.


Options

You can create slider tailored to your needs quickly and easily. Simply replace chosen options listed below.
 

Transition style:

fade, fade2, slideLeft, slideLeft2, slideRight, slideRight2, slideUp, slideUp2, slideDown, slideDown2, zoomIn, zoomIn2, zoomOut, zoomOut2, swirlLeft, swirlLeft2, swirlRight, swirlRight2, burn, burn2, blur, blur2, flash, flash2, random
 
If you want to see available transitions, visit Vegas slider website.
 

 ...
   <div class="home-bg-slider slider-full autoplay" data-transition="#transition">
      <div class="home-overlay active-overlay"></div>
      <div class="home-slider-container">
...

Where #transition is your chosen animation.
 

Slider autoplay

If you want to turn on slider autoplay, add to markup “autoplay” class (example above).

 ...
   <div class="home-bg-slider slider-full autoplay">
      <div class="home-overlay active-overlay"></div>
      <div class="home-slider-container">
...

Swiper slider

 

Information

“Swiper” is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.


Structure

Slider elements are always structured as so:
 

...
   <div class="home-bg-slider slider-centered swiper-container autoplay">
      <div class="swiper-wrapper">

         SLIDES
	 <div class="swiper-slide"><div class="slide" style="background-image: url('#image');"></div></div>
	 <div class="swiper-slide"><div class="slide" style="background-image: url('#image');"></div></div>
	 <div class="swiper-slide"><div class="slide" style="background-image: url('#image');"></div></div>

      </div>
      <div class="home-overlay active-overlay"></div>
      <div class="home-slider-arrows swiper-arrow show-for-large">
         <div class="arrow-prev">
	   (icon left arrow)
         </div>
         <div class="arrow-next">
	   (icon right arrow)
         </div>
      </div>
...

To add slides, simply replace #image to desired image url.


Options

You can create slider tailored to your needs quickly and easily. Simply replace chosen options listed below.
 

Slides duration in miliseconds
 ...
   <div class="homepage homepage-slider2" data-delay="#delay">
      <div class="home-bg-slider slider-centered swiper-container autoplay">
...

Where #delay is your desired slides duration.
 

Slides transition duration in miliseconds
 ...
    <div class="homepage homepage-slider2" data-transition-duration="#duration">
      <div class="home-bg-slider slider-centered swiper-container autoplay">
...

Where #duration is your desired transition duration.
 

Slider autoplay
 ...
   <div class="homepage homepage-slider2" data-auto="#autoplay">
      <div class="home-bg-slider slider-centered swiper-container autoplay">
...

Replace #autoplay on boolean expression (true or false) and add to markup “autoplay” class.
 

Was this article helpful to you? Yes No