Hot File

Create Image Content Slider with CSS3 only

View: 637    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: References   Fields: Other

9 point/3 review File has been tested

Image Content Slider is a photo slide show function, very suitable for creating web pages Gallery display images inherently more. There are many plugins and code to help us create this function.

Introduction

Image Content Slider is a photo slide show function, very suitable for creating web pages Gallery display images inherently more. There are many plugins and code to help us create this function. But in the post today, my friends and I would just use CSS3 to create photo slide show function without the need to use any scripts at all.

Because some features of CSS3 has not been supported on many browsers, so that to be able to see a demo of this function, you should look at Chrome and Safari browser to get the best results.

Step 1: HTML

First, we'll compile a list of pictures to be displayed via the <li>, while we also make available thumbnail for each image to be linked through the id.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<div class="slider-wrapper">
    <ul class="s-thumbs">
         <li><a href="#slide-1"><img src="img/thumb1.png" alt="" /></a></li>
         <li><a href="#slide-2"><img src="img/thumb2.png" alt="" /></a></li>
         <li><a href="#slide-3"><img src="img/thumb3.png" alt="" /></a></li>
         <li><a href="#slide-4"><img src="img/thumb4.png" alt="" /></a></li>
         <li><a href="#slide-5"><img src="img/thumb5.png" alt="" /></a></li>
         <li><a href="#slide-6"><img src="img/thumb6.png" alt="" /></a></li>
         <li><a href="#slide-7"><img src="img/thumb7.png" alt="" /></a></li>
    </ul>
 
    <ul class="s-slides">
        <li id="slide-1"><img src="img/slide1.png" alt="" /></li>
        <li id="slide-2"><img src="img/slide2.png" alt="" /></li>
        <li id="slide-3"><img src="img/slide3.png" alt="" /></li>
        <li id="slide-4"><img src="img/slide4.png" alt="" /></li>
        <li id="slide-5"><img src="img/slide5.png" alt="" /></li>
        <li id="slide-6"><img src="img/slide6.png" alt="" /></li>
        <li id="slide-7"><img src="img/slide7.png" alt="" /></li>
    </ul>
</div>

Step 2: Format the basic CSS

First we'll use CSS to align the image thumbnail and large image uniformity.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    list-style: none;
}
 
.slider-wrapper {
    width: 508px;
    overflow: hidden;
}
 
ul.s-thumbs li {
    float: left;
}
 
ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
    width: 500px;
    height: 350px;
    position: relative;
}
 
ul.s-slides {
    overflow: hidden;
    clear: both;
}
 
ul.s-slides li {
    position: absolute;
    z-index: 50;
}

step2

Step 3: CSS3 Styling

Now we will add some CSS3 features to make the effect more beautiful. We'll use attributes scratchy shadow (shadow), rounded corners ... You remember prefix before each attribute for each separate browser offline.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
ul.s-thumbs li {
    float: left;
    margin-bottom: 10px;
    margin-right: 11px;
}
 
ul.s-thumbs li:last-child {
    margin-left: 1px;
    margin-right: 0;
}
 
ul.s-thumbs a {
    display: block;
    position: relative;
    width: 55px;
    height: 55px;
    border: 4px solid transparent;
 
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
 
    font: bold 12px/25px Arial, sans-serif;
    color: #515151;
    text-decoration: none;
    text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
}
 
ul.s-thumbs img {
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    -moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
 
ul.s-thumbs a:hover,
ul.s-slides {
    border: 4px solid #141517;
 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
    -moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
    box-shadow: 0px 1px 0px rgba(255,255,255,.05);
}

Step 4: Add descriptive image

We'll add a brief text description of the image when we drag the thumbnail images. At the same time we will use: before selector to create Arrows for the description box.

Return html snippet was created in step 1, we will need to add a line position description is available in the thumbnail image as follows:

1
2
3
4
5
6
7
8
9
<ul class="s-thumbs">
    <li><a href="#slide-1"><img src="img/thumb1.png" alt="" /><span>Image 1</span></a></li>
    <li><a href="#slide-2"><img src="img/thumb2.png" alt="" /><span>Image 2</span></a></li>
    <li><a href="#slide-3"><img src="img/thumb3.png" alt="" /><span>Image 3</span></a></li>
    <li><a href="#slide-4"><img src="img/thumb4.png" alt="" /><span>Image 4</span></a></li>
    <li><a href="#slide-5"><img src="img/thumb5.png" alt="" /><span>Image 5</span></a></li>
    <li><a href="#slide-6"><img src="img/thumb6.png" alt="" /><span>Image 6</span></a></li>
    <li><a href="#slide-7"><img src="img/thumb7.png" alt="" /><span>Image 7</span></a></li>
</ul>

After the insert is finished, we will use the following CSS snippet to display the description:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
ul.s-thumbs li a:hover span {
    position: absolute;
    z-index: 101;
    bottom: -30px;
    left: -22px;
    display: block;
    width: 100px;
    height: 25px;
    text-align: center;
 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
    -webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
    -moz-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
    box-shadow: 0px 1px 0px rgba(0,0,0,.4);
 
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
 
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top#ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top#ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top#ffffff 0%,#bcbcbc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top#ffffff 0%,#bcbcbc 100%); /* IE10+ */
    background: linear-gradient(top#ffffff 0%,#bcbcbc 100%); /* W3C */
}
 
ul.s-thumbs li a:hover span:before {
    width: 0;
    height: 0;
    border-bottom: 5px solid #ffffff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: '';
    position: absolute;
    top: -5px;
    left: 44px;
}
 
ul.s-thumbs li:first-child a:hover span {
    left: -3px;
}
 
ul.s-thumbs li:first-child a:hover span:before {
    left: 25px;
}
 
ul.s-thumbs li:last-child a:hover span {
    left: auto;
    right: -3px;
}
 
ul.s-thumbs li:last-child a:hover span:before {
    left: auto;
    right: 26px;
}

step4

Step 5: Slider Transitions

Now we will proceed with creating the different transitions, each time the mouse is clicked thumbnail. By assigning additional class name for each element <li> as follows:

HTML

1
2
3
4
5
6
7
8
9
<ul class="s-slides">
    <li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li>
    <li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li>
    <li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li>
    <li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li>
    <li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li>
    <li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li>
    <li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>

CSS

We will usekeyframes to make each transition effects as follows:

Slide from left

01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Slide Left */
 
@-webkit-keyframes 'slideLeft' {
    0% { left: -500px; }
    100% { left: 0; }
}
 
ul.s-slides li.slideLeft:target {
    z-index: 100;
 
    -webkit-animation-name: slideLeft;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Slide From Right

01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Slide Right */
 
@-webkit-keyframes 'slideRight' {
    0% { left: 500px; }
    100% { left: 0; }
}
 
ul.s-slides li.slideRight:target {
    z-index: 100;
 
    -webkit-animation-name: slideRight;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Slide From Top

01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Slide Top */
 
@-webkit-keyframes 'slideTop' {
    0% { top: -350px; }
    100% { top: 0; }
}
 
ul.s-slides li.slideTop:target {
    z-index: 100;
 
    -webkit-animation-name: slideTop;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Slide From Bottom

01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Slide Bottom */
 
@-webkit-keyframes 'slideBottom' {
    0% { top: 350px; }
    100% { top: 0; }
}
 
ul.s-slides li.slideBottom:target {
    z-index: 100;
 
    -webkit-animation-name: slideBottom;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Zoom Image From Inside

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/* Zoom In */
 
@-webkit-keyframes 'zoomIn' {
    0% { -webkit-transform: scale(0.1); }
    100% { -webkit-transform: none; }
}
 
ul.s-slides li.zoomIn:target {
    z-index: 100;
    top: 4px;
 
    -webkit-animation-name: zoomIn;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Zoom Image From Outside

01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Zoom Out */
 
@-webkit-keyframes 'zoomOut' {
    0% { -webkit-transform: scale(2); }
    100% { -webkit-transform: none; }
}
 
ul.s-slides li.zoomOut:target {
    z-index: 100;
 
    -webkit-animation-name: zoomOut;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Rotate and Zoom the Image

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/* Rotate */
 
@-webkit-keyframes 'rotate' {
    0% { -webkit-transform: rotate(-360deg) scale(0.1); }
    100% { -webkit-transform: none; }
}
 
ul.s-slides li.rotate:target {
    z-index: 100;
    top: 4px;
 
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Step 6: "Not Target" Image

Do we use z-index to determine the image appears on the top, and we'll get an error when clicking to display images moi.De solve this, we will use "notTarget"

01
02
03
04
05
06
07
08
09
10
11
12
/* Not Target */
 
@-webkit-keyframes 'notTarget' {
    0% { z-index: 75; }
    100% { z-index: 75; }
}
 
ul.s-slides li:not(:target) {
    -webkit-animation-name: notTarget;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Step 7: Assign first images will appear

When the slider is loaded, the last image will be displayed first, to the first image is loaded the first time, we use the following css:

1
2
3
4
5
/* First Slide */
 
ul.s-slides li.first {
    z-index: 60;
}

Step 8: Load Slider

In this step, we will create a fade at first loaded slider.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Slider Load */
 
@-webkit-keyframes 'load' {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
 
.slider-wrapper {
    -webkit-animation-name: load;
    -webkit-animation-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
}

So we've created slide success, if you have any questions, do not hesitate to leave a message in the form of comments.

Create Image Content Slider with CSS3 only

Create Image Content Slider with CSS3 only Posted on 13-08-2015  Image Content Slider is a photo slide show function, very suitable for creating web pages Gallery display images inherently more. There are many plugins and code to help us create this function. 3/10 637

Comment:

To comment you must be logged in members.

Files with category

  • Instructions for installing and configuring Windows Live Mail on Windows 10 simple

    View: 2688    Download: 0   Comment: 0   Author: none  

    Instructions for installing and configuring Windows Live Mail on Windows 10 simple

    Category: References
    Fields: Other

    0/3 review
    Windows 10 pre-installed Mail application for managing personal email on the device. The latest version of this application but improved a lot and support other email accounts such as Gmail or Yahoo Mail but users almost no "salty" really with this...

  • Step by step instructions to create social networking buttons with CSS3

    View: 1876    Download: 0   Comment: 0   Author: none  

    Step by step instructions to create social networking buttons with CSS3

    Category: References
    Fields: Other

    0.75/6 review
    CSS3 help web designers have the ability to create buttons (buttons) very nice, today I will share with you two tips decoration for button in your web becomes radiant beauty that no need to use photoshop.

  • You should understand the CSS Box Shadow

    View: 2029    Download: 0   Comment: 0   Author: none  

    You should understand the CSS Box Shadow

    Category: References
    Fields: Other

    1.3181818181818/11 review
    Effects his shadow was introduced in the previous article, however, in this article, I will guide more specific about shadow attributes, you try it with anything. First we try to learn css following paragraph:

  • How to do button movement with beautiful CSS3

    View: 1716    Download: 0   Comment: 0   Author: none  

    How to do button movement with beautiful CSS3

    Category: References
    Fields: Other

    0/4 review
    Previously to create motion effects button, you must draw the button in photoshop, then switched to flash to make it possible to move. But now you need not spend too much time doing it, all because of the emergence of CSS3.

  • Create a dropdown menu with CSS3 effects with beautiful transtions

    View: 1991    Download: 0   Comment: 0   Author: none  

    Create a dropdown menu with CSS3 effects with beautiful transtions

    Category: References
    Fields: Other

    0.45/10 review
    More of the dropdown menu you want to introduce to you, this will have the effect menu transitions (converted background of menu background from pale to dark). This menu works well on browsers like FF, Chrome, Safary, but unfortunately did not work...

  • How to hack css for all browsers you should know

    View: 1625    Download: 0   Comment: 0   Author: none  

    How to hack css for all browsers you should know

    Category: References
    Fields: Other

    1.6875/8 review
    In the process of web design, which makes it the most headaches is how to design web pages that you can run on the browser. Especially when clients use the old as IE6 browser such. However, with this article, you will easily edit interface runs well...

  • Create Accordion with extremely beautiful CSS3

    View: 2025    Download: 0   Comment: 0   Author: none  

    Create Accordion with extremely beautiful CSS3

    Category: References
    Fields: Other

    0.9/5 review
    Accordion is a technique that helps you shortened the content that you want displayed on the website. It is often used for the display of submenus. In addition you can also use it for content, images. Before applying this procedure, you have to use...

  • Create the effect Hovercho images with Webkit and CSS3 is great

    View: 1722    Download: 0   Comment: 0   Author: none  

    Create the effect Hovercho images with Webkit and CSS3 is great

    Category: References
    Fields: Other

    1.125/4 review
    WebKit is one open source application framework provides the necessary components built one for your web browser. Along with CSS3, cả have contributed to very nice effect những previously only using JavaScript or JQuery thực beige.​

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd