most popular slider's in web design simple and useful

in a few years ago I only copy and paste other code's for using slider in my design but this is don't work correctly because always other code's contain additional code, so conflict with my design now I can design slider and this repository contain most popular sliders in web design without any extra code or html tag.

you can only copy & paste code to your favorite location on you'r design or website

in the following I'm describe how to use every of this sliders

all of this sliders contain 3 files index.html style.css js.js.

Carousel slider control with navigation and controls.

only copy & paste to your project.

in index.html file, and in the each <section></section> you must Insert one of slide content. remove extra section or add, if you want more and <li></li> tags should be repeat to number of slides.

in js.js and in line 7 you must Specified numberOfSlide variable.

in style.css and in line 15 value of width for class .slider must be numberOfSlide * 100%

this 3 step required for working slider correctly.

you can change or add new css style for change looks and fill.

Carousel with fade effect:

only copy & paste to your project.

in index.html file, and in the each <section></section> you must Insert one of slide content. remove extra section or add, if you want more.

in js.js and in line 1 you must Specified numberOfSlides variable.

you can change or add new css style for change looks and fill.

Carousel with multiple elements:

only copy & paste to your project.

your slider content must be in:

<div class="card-container">
     <div class="card">
          <div class="img">1</div>
          <div class="info"><p>your text or title</p></div>
     </div>
</div>

remove extra section or add, if you want more slide.

you can change or add new css style for change looks and fill.

full feature slider optimized for mobile and desktop with touch event and navigation button:

only copy & paste to your project.

in index.html file, and in the

<div class="track">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
    <div class="card">10</div>
</div>

you can Insert slider content. remove extra div or add, if you want more.

you can change or add new css style for change looks and fill.

infinity loop carousel slider:

only copy & paste to your project.

in index.html file, and in the

<div class="slider">
    <section>section1</section>
    <section>section2</section>
    <section>section3</section>
    <section>section4</section>
</div>

you can Insert slider content. remove extra div or add, if you want more.

in js.js and in line 6 you must Specified slideNumber variable.

in style.css and in line 60 value of width for class .slider must be slideNumber * 100%

you can change or add new css style for change looks and fill.

Mobile friendly carousel with touch and pointer events:

only copy & paste to your project.

in index.html file, and in the

<div class="track">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
    <div class="card">10</div>
</div>

you can Insert slider content. remove extra div or add, if you want more.

you can change or add new css style for change looks and fill.

slider with slide-show:

only copy & paste to your project.

in index.html file, and in the

<div class="slider">
    <section>section1</section>
    <section>section2</section>
    <section>section3</section>
    <section>section4</section>
</div>

you can Insert slider content. remove extra div or add, if you want more.

in js.js and in line 1 you must Specified numberOfSlides variable.

you can change or add new css style for change looks and fill.

slider with mouse move event:

only copy & paste to your project.

this slider contain mouse move event "dont work on touch screen"

in index.html file, and in the

<div class="card-container">
    <div class="card-inner">1</div>
    <div class="card-inner">2</div>
    <div class="card-inner">3</div>
    <div class="card-inner">4</div>
    <div class="card-inner">5</div>
    <div class="card-inner">6</div>
    <div class="card-inner">7</div>
    <div class="card-inner">8</div>
    <div class="card-inner">9</div>
    <div class="card-inner">10</div>
    <div class="card-inner">11</div>
    <div class="card-inner">12</div>
</div>

you can Insert slider content. remove extra div or add, if you want more.

you can change or add new css style for change looks and fill.