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");
});
});
1 comments:
commentsAppreciating the persistence you put into your blog and detailed information you provided.
ReplyThanks for sharing! Glad to read your posts. Thumbs up👍!!
online internship
online internships
watch internship online
online internship for students
the internship online
online internship with certificate
online internship certificate
python online internship
data science online internship