3

I want to implement a Bootstrap 3 carousel with multiple items on my page and it should move one image each step. I tried using a few examples that I found and every time the same problem. When I inspect element, I see 4 images in each item and then it moves the item but all the 4 images are moving together.

At the moment I use the example I found here.

This is My page that I use the carousel in.

Please help!

I add my HTML code here

<div class="col-xs-12 text-center" style=" direction: ltr">
<div class="col-md-10 col-md-offset-1">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">

            <div class="item active">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250227371376.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250229867424.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250232831481.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250234859520.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250236731556.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250238603592.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250240475628.jpg" class="img-responsive"></a></div>
            </div>

            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250242503667.jpg" class="img-responsive"></a></div>
            </div>

        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
</div>

and this ios the javascript i'm using:

    $(document).ready(function () {
    $('#myCarousel').carousel({
        interval: 4000
    })

    $('.carousel .item').each(function(){
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        for (var i=0;i<2;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }

            next.children(':first-child').clone().appendTo($(this));
        }
    });
});

and this is the css i'm using:

.carousel-inner .active.left { left: -25% ; }
.carousel-inner .next        { left:  25% ; }
.carousel-inner .prev        { left:  -25% ; }
.carousel-control            { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:-15px;background-image:none;}
tartash
  • 49
  • 3
  • 6

1 Answers1

0

Oke. Its not the problem with your html. Your javascript is moving the <div class='item'>

Change your html to this.

      <div class="col-xs-12 text-center" style=" direction: ltr">
        <div class="col-md-10 col-md-offset-1">
            <div class="carousel slide" id="myCarousel">
                <div class="carousel-inner">

                    <div class="GIVE_THIS_ANOTHER_CLASS">
                        <div class="item active col-md-3"><a href="#"><img src="http://www.sea-gal.co.il/sysvault/docsgalleries28/thcdp635830250227371376.jpg" class="img-responsive"></a></div>
                    </div>
                </div>
<!-- YOUR OTHER DIVS WITH IMAGES UNDER THIS-->

            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
        </div>

The class item active replace them in the col-md-3 div Your javascript is moving the div's with the class item and is not trying to move the images inside it. So remake your javascript or replace your classes

Wim Pruiksma
  • 588
  • 5
  • 19
  • Thank you. I know that, and if you look at the source of HTML insted of inspect element you wil see that this is what i did. that is the problem which I do not understand. – tartash Nov 16 '15 at 11:57
  • You are moving the div where the 4 div's are in instead of moving the parent divs of the images. Add some html code of your page so i can help you better – Wim Pruiksma Nov 16 '15 at 11:59
  • Thanx. I added the HTML in the original quastion. – tartash Nov 16 '15 at 12:21
  • I did what you wrote but it only confused the hole HTML. as far as I understand what is going on there I think that it moves the hole width of the item insted of moving 25% of it. but I don't know what to do. – tartash Nov 16 '15 at 21:11
  • Post you javascript. i will try to rebuild it – Wim Pruiksma Nov 17 '15 at 08:55
  • @tartash i downloaden the slider myself. I coudn't find the problem within the code. I think it is a bootstrap problem. Visit this link http://thedesignhill.com/jquery-image-and-content-sliders/ there are some good sliders on it. – Wim Pruiksma Nov 18 '15 at 07:25