Curso de Design Responsivo Aula 17 Criando SlideShow com plugin jQuery

Nessa vídeo aula vamos aprender como criar um SlideShow de imagens utilizando um plugin do jQuery.

O site http://www.jqueryscript.net oferece milhares de plugin jQuery totalmente gratuitos com exemplos e tutorias para desenvolvedores.

Dentre os vários exemplos de slideshows disponíveis no site escolhi para usar nessa vídeo aula um slide simples e nele realizamos várias modificações no css e em sua estrutura afim de mostrar as possibilidades infinitas de alterações que podem ser realizadas.

 Slide.js é um belo, leve plugin jQuery slideshow / carrossel que vem com um efeito de zoom de imagem usando CSS3.

Clique aqui para conhecer mais sobre o plugin além de ver exemplo online e realizar o download do mesmo.

Código HTML desenvolvido e modificado na vídeo aula

<div class="slide limpa">
            <div id="slideshow-banner">
                <ul>
                    <li class="slideshow-item">
                        <img src="uploads/slide1.jpg" alt="Slide" title="Slide">
                    </li>
                    <li class="slideshow-item">
                        <img src="uploads/slide2.jpg" alt="Slide" title="Slide">
                    </li>
                    <li class="slideshow-item">
                        <img src="uploads/slide3.jpg" alt="Slide" title="Slide">
                    </li>
                </ul>
            </div>
        </div>

Código CSS desenvolvido e modificado na vídeo aula

.slide {
    position: relative;
    min-height: 450px
}
#slideshow-controller {
    position: absolute;
    bottom: 10px;
    left: 45%;
}

#slideshow-banner ul { position: relative; }

#slideshow-banner ul .slideshow-item {
    position: absolute;
    width: 100%;
    height: 450px
}

#controller-left {
    position: absolute;
    left: 1%;
    top: 40%;
    cursor: pointer;
}

#controller-right {
    position: absolute;
    right: 1%;
    top: 40%;
    cursor: pointer;
}

.controller-item {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #003300;
    margin-right: 10px;
    border-radius: 10px;
    opacity: 0.5;
    cursor: pointer;
}

.controller-item-hover {
    opacity: 1;
    background: #009900;
    transform: rotateX(360deg);
    transition: transform 2s;
}

.slideshow-transform {
    transform: scale(1.1, 1.1);
    transition: transform 8s;
}

Código jQuery utilizado na vídeo aula

    $('#slideshow-banner').slide({
        cdTime: 5000,
        controllerLeftButton: "imagens/esquerda.png",
        controllerRightButton: "imagens/direita.png"
    });

 



Hospedagem Profissional de Sites