Today i shared a script of Nice Moving slide script for website using the simple css and Jquery. Every website attract the customers by website sliders. Sliders are very important for every website. This type of awesome moving sliders really attracting the users. This effect is slider is moving from right to left slowly like video animation and it is disappear suddenly and the second slider moving right to left like that the sliders continue their works.
This awesome moving sliders images is specified in css file. This nice slider is full width and full height slider you can modify the height and width of the sliders to change the css code. the moving functions defined using css code using css keyframe. This is one of the responsive slider. Moving slider will display all of the screens in perfect manner.
This is very interesting script, I will provided the full source code in download page you can download and use this script in your projects. It is also done by using the Jquery , css, javascript. You can change this code according to your design(website). Here i provided the demo link, In the demo link you can view the live moving slide effect. I hope this example is very helpful.
Html code for Awesome Moving Slider:
<section id="ph-background" class="ph-background">
<div class="slides-box">
<ul class="slides">
<li style="background: url('') center no-repeat"></li>
<li style="background: url('') center no-repeat"></li>
<li style="background: url('') center no-repeat"></li>
<li style="background: url('') center no-repeat"></li>
</ul>
</div>
</section>
<div class="slides-box">
<ul class="slides">
<li style="background: url('') center no-repeat"></li>
<li style="background: url('') center no-repeat"></li>
<li style="background: url('') center no-repeat"></li>
<li style="background: url('') center no-repeat"></li>
</ul>
</div>
</section>
Css for Moving Animation:
ul li {
list-style-type: none;
}
.slides-box {
width: 100%;
height: 100%;
margin: auto;
overflow: hidden;
position: absolute;
z-index: 0;
top: 0;
}
.slides {
position: relative;
height: 100%;
width: 100%;
margin: auto;
float: left;
}
@-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -200px; }
}
@keyframes MOVE-BG {
from { left: 0; }
to { left: -200px; }
}
.bg{
width: 900px;
animation-name: MOVE-BG;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.slides li {
display: none;
position: absolute;
/*width: 100%;*/
height: 100%;
}
.slides li img {
display: block;
width: 100%;
margin: auto;
}
.prev,
.next {
position: absolute;
z-index: 99;
top: 50%;
margin-top: -40px;
left: 0;
height: 70px;
width: 30px;
color: #fff;
cursor: pointer;
background-color: #000;
opacity: .5;
}
.prev:hover,
.next:hover {
opacity: .7;
}
@media(max-width: 767px){
@-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -300px; }
}
@keyframes MOVE-BG {
from { left: 0; }
to { left: -300px; }
}
.bg{
width: 1218px;
}
.slides :first-child {
background: url('../Banners/Banner1_big.jpg') center no-repeat !important;
}
.slides :nth-child(2) {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner2_big.jpg') center no-repeat !important;
}
.slides :nth-child(3) {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner3_big.jpg') center no-repeat !important;
}
.slides :last-child {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner4_big.jpg') center no-repeat !important;
}
}
@media(min-width: 768px){
@-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -300px; }
}
@keyframes MOVE-BG {
from { left: 0; }
to { left: -300px; }
}
.bg{
width: 1218px;
}
.slides :first-child {
background: url('../Banners/Banner1_big.jpg') center no-repeat !important;
}
.slides :nth-child(2) {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner2_big.jpg') center no-repeat !important;
}
.slides :nth-child(3) {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner3_big.jpg') center no-repeat !important;
}
.slides :last-child {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner4_big.jpg') center no-repeat !important;
}
}
@media(min-width: 992px){
.bg{
width:1662px;
}
.slides :first-child {
background: url('../Banners/Banner1.jpg') center no-repeat !important;
}
.slides :nth-child(2) {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner2.jpg') center no-repeat !important;
}
.slides :nth-child(3) {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner3.jpg') center no-repeat !important;
}
.slides :last-child {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner4.jpg') center no-repeat !important;
}
}
@media(min-width: 1400px){
.bg{
width: 2218px;
}
.slides :first-child {
background: url('../Banners/Banner1_big.jpg') center no-repeat !important;
}
.slides :nth-child(2) {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner2_big.jpg') center no-repeat !important;
}
.slides :nth-child(3) {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner3_big.jpg') center no-repeat !important;
}
.slides :last-child {
background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner4_big.jpg') center no-repeat !important;
}
}
0 Comments