Slider Jquery CSS3 Without Plugin

Slider Jquery CSS3 Without Plugin

Jquery Slider Without Plugin

Jquery Slider Without Plugin 

Jquery and html CSS3 Slider image animation style only used without any plugin. Fully nice look and page speed up your wep page. So make a own slider without any plugin. plugin avoided in slider.

following example code for jquery and css3.

index.html 

<div class="gallery">
 <ul>
   <li class="each">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-1.jpg" alt="Lorem 1" />
    <span class="caption">
      <h2>Lorem #1</h2>
      <p>Lorem ipsum dolor sit amet.</p>
    </span>
   </li>
   <li class="each">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" alt="Lorem 2" />
    <span class="caption">
      <h2>Lorem #2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt esse numquam est qui aut debitis.</p>
    </span>
   </li>
   <li class="each">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-3.jpg" alt="Lorem 3" />
    <span class="caption">
      <h2>Lorem #3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt esse numquam est qui aut debitis.</p>
    </span>
   </li>
   <li class="each">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-4.jpg" alt="Lorem 4" />
    <span class="caption">
      <h2>Lorem #4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt esse numquam est qui aut debitis.</p>
    </span>
   </li>
   <li class="each">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg" alt="Lorem 5" />
    <span class="caption">
      <h2>Lorem #5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt esse numquam est qui aut debitis.</p>
    </span>
   </li>
 </ul>
 <div class="direction">
  <span class="next">+</span>
 </div>
</div>

Style.css

/* Import */
@import url("http://fonts.googleapis.com/css?family=Lato");

/* Basic Reset */
* {  
  font-smoothing: antialiased;
  margin: 0; padding: 0;
}
body { 
  background: #33322f; 
  overflow-x: hidden; 
}

/* Gallery */
.gallery { 
 position: relative; 
 width: 700px; height: 306px; 
 margin: auto; 
 overflow: hidden; 
 list-style: none;
}
.gallery img { 
 display: block; 
 float: left; 
}
.gallery ul {
 list-style: none;
}
.gallery ul li.each { 
 position: relative; 
 float: left;
 transition: all .8s; 
}
.gallery ul li.each, .gallery ul li.each img { 
 height: 0px; 
}
.gallery ul li.each img { 
 opacity: 0.5; 
 transition: all .4s; 
}
.gallery ul li.each.active, .gallery ul li.each.active img { 
 height: 306px; 
}
.gallery ul li.each.active img { 
 opacity: 1; 
}
.gallery .caption { 
 position: absolute;
 bottom: 0; 
 left: 20px; right: 20px;
 text-transform: uppercase;
}

.gallery .caption h2, .gallery .caption p {
 background: #fff000; 
 padding: 7px;
  box-shadow: 0 0 20px #000;
}
.gallery .caption h2 {
 font: 24px "Lato", sans-serif;
 float: left;
}
.gallery .caption p {
 font: 18px "Lato", sans-serif;
 float: left;
  clear: both;
}

/* Direction */
.direction { 
 position: absolute; 
 top: 50%; margin-top: -74px; 
 right: -100px;
 background: #fff000;
 width: 158px; height: 158px;
 display: block;
 transform: rotate(45deg); 
  z-index: 9999;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
}
.direction .next {
 position: absolute;
 top: 90px; left: 25px;
 color: #ededed;
 font: 40px "Lato", sans-serif;
 text-shadow:
  0 1px #000,
  0 2px #ccc,
  0 3px #ccc,
  0 4px #ccc,
  0 5px #ccc;
 transform: rotate(-45deg);
 cursor: pointer;
}

Slider.js

$(function(){
 $slideshow = $(".gallery ul");
 $slideactive = $slideshow.find("li.each").first().addClass('active').show();
 $(".direction .next").click(function(){
 $slideactive = $slideshow.find("li.active").next();
  if(!$slideactive.size())
   $slideactive = $slideshow.find("li.each").first();  $slideshow.find("li.active").removeClass("active");
   $slideactive.addClass("active");
 });
});

Slider Jquery CSS3 Without Plugin Dev2Tricks 5 of 5

Slider Jquery CSS3 Without Plugin Jquery Slider Without Plugin Jquery Slider Without Plugin  Jquery and html CSS3 Slider image...

Author : Dev2Tricks

Share this

Related Posts