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.
copy & paste
code to your favorite location on you'r design or website
you can only in the following I'm describe how to use every of this sliders
index.html
style.css
js.js
.
all of this sliders contain 3 files Carousel slider control with navigation and controls.
copy & paste
to your project.
only 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:
copy & paste
to your project.
only 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:
copy & paste
to your project.
only 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:
copy & paste
to your project.
only 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:
copy & paste
to your project.
only 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:
copy & paste
to your project.
only 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:
copy & paste
to your project.
only 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:
copy & paste
to your project.
only 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.