varun sharma varun sharma - 6 months ago 49
HTML Question

Set multple small image in Javascript (Like carousel)

I am using Materialize design, Jquery and javascript. I want to implement set multiple images in one row and auto move to particular direction. Right now i am using 3d effect carousel in Materialize design. But it is not works fine. When i put anchor tag(put redirect link) then it will stuck (some time ).



$('.carousel').carousel({
dist: 0,
shift: 0,
padding: 20,
interval: 100
});

.carousel .carousel-item {
opacity: 1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>


<div class="carousel">
<a class="carousel-item" href="#one!">
<img src="http://lorempixel.com/250/250/nature/1">
</a>
<a class="carousel-item" href="#two!">
<img src="http://lorempixel.com/250/250/nature/2">
</a>
<a class="carousel-item" href="#three!">
<img src="http://lorempixel.com/250/250/nature/3">
</a>
<a class="carousel-item" href="#four!">
<img src="http://lorempixel.com/250/250/nature/4">
</a>


<a class="carousel-item" href="#five!">
<img src="http://lorempixel.com/250/250/nature/5">
</a>

</div>





I want to implement like app.
http://www.jqueryrain.com/?Q5dad1oS

I want to display multiple small image. But i don't want to use any plugin. Because i don't want increase size of page.

Answer

I find answer to my question. I have implemented carousel without using any plugin. It use plain javascript or jquery.

var firstval = 0;

function Carousel() {
    firstval += 2;
    parent = document.getElementById('container');
    parent.style.left = "-" + firstval + "px";
    if (!(firstval % 150)) {
        setTimeout(Carousel, 3000);
        firstval = 0;
        var firstChild = parent.firstElementChild;
        parent.appendChild(firstChild);
        parent.style.left= 0;
        return;
    }
    runCarousel = setTimeout(Carousel, 10);
}
Carousel();
        #wrapper {
            position: relative;
            width: 450px;
            height: 150px;
            margin: 0 auto;
            overflow: hidden;
        }
        #container {
            position: absolute;
            width: 450px;
            height: 150px;
        }
        .child {
            width: 150px;
            height: 150px;
            padding-top: 35px;
            float: left;
            text-align: center;
            font-size: 60px;
        }
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="wrapper">
    <div id="container">
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0018904_50_red_roses_in_vase_320.jpeg"> </div>
        <div  class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
    </div>
</div>