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 »

12 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
28 July 2021 at 23:48 delete

I have been reading for the past two days about your blogs and topics, still on fetching! Wondering about your words on each line was massively effective. 슬롯머신

Reply
avatar
28 July 2021 at 23:51 delete

This is Very very nice article. Everyone should read. 토토사이트

Reply
avatar
30 July 2021 at 06:49 delete

We like to honor numerous other world wide web websites around the web, even though they aren’t linked to us, by linking to them. Beneath are some web pages really worth checking out.온라인바둑이
‮‬

Reply
avatar
30 July 2021 at 06:50 delete

I have read this put up and if I may I desire to recommend
you some interesting things or tips. Maybe you can write next articles regarding this
article.바카라사이트

Reply
avatar
30 July 2021 at 06:52 delete

I wish to learn more issues approximately it! 카지노사이트

Reply
avatar
30 July 2021 at 06:53 delete

I am actually happy to read this website posts which
contains plenty of helpful information, thanks for providing these kinds of statistics.더킹카지노

Reply
avatar
4 September 2021 at 00:11 delete

I am impressed with this website, really I am a big fan.

my web page; 토토사이트


Reply
avatar
6 September 2021 at 22:09 delete

Hi there i amm kavin, its my first occasion to commenting anywhere,
when i read this paragraph i thought i could also
create comment due to this sensible post. ルーレット



Reply
avatar