jQuery Image Slider(wow slider) with Thumbnails for Blogspot

November 07, 2021 Post a Comment

Let’s Install the Image Slider to your Blogger Blog
1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.

#Demo

#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}

#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="slider-box">
    <div id="slider-wrapper">
        <div id="jslider-container">
            <div class="jslider_images">
                <ul>
                    <li>
                        <a href="http://dimpost.com">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnHN1Hm7-AjjMVc6YCm7f8fxJvmZFW9m3H9nW4Vu7mvMhN14xTEhbIS7IvmGc0oraajrsi7WUWJbb3dshernF948pUSFTyk6W8jREQawp6VMq9EORl4TTqxvF8VBE5D8gEnrQN3EgtBrKF/s550/sample1.jpg" title="Sunset" />
                        </a>A boat with beautiful sunset.</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbPPZbv6h4wKZlk-b6UNj91AfELLGWGUBDKQ8d-tLX0ePrTtQ2hyphenhyphen4O5kxUQv9HqI5IVZlxRMWii4ebJeEOaloiqVrigZqkmsgEMxcEnCeeZIFGtAB1EQZqWqnJxnkziN8bQBzB_-cctfs/s550/sample2.jpg" title="Rainbow" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9btTT62on09MR49Of1Ddza-AdBWqae3R-L6-KhwXQiopDDxAn96Me7VRnunBjYDssEqTtvsx0jk82bO-W-o_DEKCUu0mJYaSvrAIHzMF_cQNb3A0QHAlKnZOfV2bbtAXwmDz7eFKO8ZVl/s550/sample3.jpg" title="True Nature" />
                        </a>Tree in field with blue sky.</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEVTxkQQMDJlT1BYFK8OVKfK5MG7szq2tT08MkovzLC3GCOuCzfSWQR5JGI0OcTbhJRXJbMGzQkosG9CxE3wKW9UHLFf0Z5i3SHDhLcgTc-tQNbkLUq1vmfOhlBk6kIY5TmacX4kwqmSR0/s550/sample4.jpg" title="Sunrise" />
                        </a>Amaizing sunrise moment</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYt-2t5rdrv6yT3hJuZchYdIbHhGmju_VQmBRzVrjwazqn0qHQnWAWzDR3FLVIXqx_G4C6TveTu5Yl1TgwxGinwsl6TEw1lq1Ve9qZUVaW-KWRskHC3wisXyrSsoeMkMGFk0K7bDsyKXQE/s550/sample5.jpg" title="CAR in HDR Nature" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWaM89Wp4wOSWSedxmY9jQEr5qqp5lZsOZYCgVpml7NwqO0BqTJc4ni7uww7Bufx7Oh4jILguAYk5CuWt2v4idVAIMZ-zD-YH-eML0Eg4InBmIFJgqZrymr8qK9c2LrnbFhPivbOsNVUrw/s550/sample6.jpg" title="Sunshine" />
                        </a>
                    </li>
                </ul>
            </div>
            <div class="jslider_thumbs">
                <div>
                    <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQB2vVDHR1S2ouqbLNRj1slo08p_Z0NT3Q7NgUcGJBJYm6HS2SLyF3kKGMbQuRd4NgVfiUaMgScpcNjdW-_BwJvdGP6NMDeDZr1SdwDLXPkb_HArQEfA65HQ0_jH5RthGoldXgGzQpkTEG/s85/sample1.jpg" /></a>
                    <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhoE2hln__MrlcR_wKveIZTFJFphqOuKt6fekjrU6Vg1LsFDSD8LXVwqD4tUOPAVNJdLPeVlbQ5ZxJV6zSVVFFkBM5QZYGLvl1hkCEQAkJlv-nLTP9AN1zbDtC0Wd4yBVbA21AoG2XkJL/s85/sample2.jpg" /></a>
                    <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBYsPsn7XoSzMfXE6pG8QsLqwltHGm3FlTK4CFX5Ei9QKVckqZbePmmD7XrFMBYI9QKvV8YYEDroSHcHkK0HBkt1WshAkroh1gWml5FNO8X_TypBVEfnx3-wi9cKGydYZcolcgCPDgw1l/s85/sample3.jpg" /></a>
                    <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJ6GXVuV5MT0hGHbxm5hG8xTIgRbXoFKfQMTX5er8ikY7D2CQTMAplzOoYD4TWb_fxCpUefrUrM0mVmnbbGYZq-R0T8gkyhw0m691OszPX81Y3FklYI2LN2KNFKLom59qPt4G-Ww3Q3Yp/s85/sample4.jpg" /></a>
                    <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Vil5at5QqmCJ-0fh0qZ0rIXDheLRV9NiH2uDEt7Jree7Z9PNGBmHLJbg69TOjiRdb5Fgd64ooEkMCKm6o19Dqyhd4nVWC_VWam9Yb9lU_LCqPM7YrfvUAqZAkvexZyncxHpSP9Y4iDdX/s85/sample5.jpg" /></a>
                    <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjETfsEx5JALPR-5yqYon6BuHowOpkWZhmt5ccQ2obeHAbtiq2nvKlE0ztmCscdXC8yOrKMb6plfgz__wHoQFkAYW6t8aesrN8au4iV_RAcbsi3dHhl7pga-gcY5K5PlBIiKZ9v0fgvZ0mu/s85/sample6.jpg" /></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

jquery image slider,image slider,jquery slider,jquery,image slider jquery,slider,jquery image slideshow,jquery slider tutorial,image slider using html5, jquery,javascript image slider,jquery image slider tutorial,automatic jquery image slider,jquery slideshow,css image slider,jquery slider plugin,image slideshow jquery,slider images,jquery slider image,jquery (software),image slider in jquery,image slider html css,javascript slider

Image Slider For Blogger

jQuery Image Slider(wow slider) with Thumbnails for Blogspot

#Demo

Post a Comment for "jQuery Image Slider(wow slider) with Thumbnails for Blogspot"

Widget HTML #3