Slider Jquery CSS3 Without Plugin

Slider Jquery CSS3 Without Plugin

Jquery Slider 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...

Share this

Related Posts

Previous
Next Post »

5 comments

comments
5 May 2021 at 12:04 delete

Your post is an excellent example of why I keep coming back to read your amazing and high quality content. 바카라사이트

Reply
avatar
5 May 2021 at 12:05 delete

카지노사이트 Remarkable posting! A lot of useful details and idea

Reply
avatar
5 May 2021 at 12:05 delete

You did cheerfully empower me because of the ideas you have posted. 스포츠토토

Reply
avatar
5 May 2021 at 12:05 delete

토토사이트 Your webpage is fantastic and this is a fantastic inspiring submit

Reply
avatar

Books Will Give More Knowledge - Purchase Books