How can i assign php variables for different div classes in bootstrap?

Question

i am trying to create a photo slider.everything works fine when i hard code it.but when i try to get the values from database slider is not viewing in correct way.please have a look and give me a solution.problem is there are two classes called item active and item.so i cannot apply for each loop.

Code that have issue

<div class="container">

                        <!--The main div for carousel-->
                        <div class="container text-center">
                            <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="2000" id="fruitscarousel">
                                <?php foreach($this->data['image_results']->result() as $image_result):?><?php echo $image_result->Url;?>
                                <div class="carousel-inner">

                                        <div class="item active">
                                            <div class="col-md-3 col-sm-4 col-xs-12">
                                                <a class="item active" href="Counting?img_id=<?php echo $image_result->ImgId;?>&href=<?php echo $image_result->Url;?>"><img class="img-responsive" src="<?php echo $image_result->ImgPath; ?>"></a>
                                            </div>
                                        </div>

                                        <div class="item">
                                            <div class="col-md-3 col-sm-4 col-xs-12">
                                                <a href="Counting?img_id=<?php echo $image_result->ImgId;?>&href=<?php echo $image_result->Url;?>"><img class="img-responsive" src="<?php echo $image_result->ImgPath; ?>"></a>
                                            </div>
                                        </div>
                                </div>
                                <?php endforeach; ?>
                                <a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                                <a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

                            </div>
                        </div>

                    </div>

Code that works correctly

<div class="container">
    <h1>Bootstrap Multiple image sliding demo</h1>
    <!--The main div for carousel-->
    <div class="container text-center">
        <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="2000" id="fruitscarousel">

            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/1.jpg" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/2.jpg" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/2.jpg" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/3.jpg" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/4.jpg" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/5.jpg" class="img-responsive"></a></div>
                </div>
            </div>

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

        </div>
    </div>


</div>

Jquery and Style

<script>
        jQuery(document).ready(function() {

            jQuery('.carousel[data-type="multi"] .item').each(function(){
                var next = jQuery(this).next();
                if (!next.length) {
                    next = jQuery(this).siblings(':first');
                }
                next.children(':first-child').clone().appendTo(jQuery(this));

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

        });
    </script>
<style>
    .carousel-control.left, .carousel-control.right {
        background-image:none;
    }

    .img-responsive{
        width:100%;
        height:auto;
    }

    @media (min-width: 992px ) {
        .carousel-inner .active.left {
            left: -25%;
        }
        .carousel-inner .next {
            left:  25%;
        }
        .carousel-inner .prev {
            left: -25%;
        }
    }

    @media (min-width: 768px) and (max-width: 991px ) {
        .carousel-inner .active.left {
            left: -33.3%;
        }
        .carousel-inner .next {
            left:  33.3%;
        }
        .carousel-inner .prev {
            left: -33.3%;
        }
        .active > div:first-child {
            display:block;
        }
        .active > div:first-child + div {
            display:block;
        }
        .active > div:last-child {
            display:none;
        }
    }

    @media (max-width: 767px) {
        .carousel-inner .active.left {
            left: -100%;
        }
        .carousel-inner .next {
            left:  100%;
        }
        .carousel-inner .prev {
            left: -100%;
        }
        .active > div {
            display:none;
        }
        .active > div:first-child {
            display:block;
        }
    }
</style>

Php code

$imagefromdatabse_query="SELECT * FROM Advertisements WHERE Active='1'  ORDER BY ImgId DESC";
        $this->data['image_results']=$this->db->query($imagefromdatabse_query);

madalinivascu · Accepted Answer · 2016-09-22 06:08:28Z

1

Do your loop in the carousel-inner: do a if to select the first image as active adding the active class

<div class="container">
    <!--The main div for carousel-->
    <div class="container text-center">
        <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="2000" id="fruitscarousel">

            <div class="carousel-inner">
               <?php foreach($this->data['image_results']->result() as $key => $image_result):?><?php echo $image_result->Url;?>
                    <div class="item <?php if($key == 0) {echo 'active';}?>">
                        <div class="col-md-3 col-sm-4 col-xs-12">
                            <a href="Counting?img_id=<?php echo $image_result->ImgId;?>&href=<?php echo $image_result->Url;?>"><img class="img-responsive" src="<?php echo $image_result->ImgPath; ?>"></a>
                        </div>
                    </div>
                     <?php endforeach; ?>
            </div>

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

        </div>
    </div>

</div>

edited Sep 22, 2016 at 6:08

answered Sep 22, 2016 at 5:37

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

colombo Over a year ago

it gives me syntax error unexpected echo T_echo and i would like to know what will happen to div class="item active"? there two classes item active and item.

Mohit Tanwani · Accepted Answer · 2016-09-22 06:03:21Z

I think you just need to give the active class to the first item, So in for-each loop you can give the class active as below.

In for-each the first-index would be 0, then apply active class.

<div class="carousel-inner">
    <?php foreach($this->data['image_results']->result() as $key => $image_result):?>
        <?php echo $image_result->Url;?>
        <div class="item <?php if($key == 0) { echo 'active'; } ?>">
            <div class="col-md-3 col-sm-4 col-xs-12">
                <a href="Counting?img_id=<?php echo $image_result->ImgId;?>&href=<?php echo $image_result->Url;?>">
                    <img class="img-responsive" src="<?php echo $image_result->ImgPath; ?>">
                </a>
            </div>
        </div>
    <?php endforeach; ?>
</div>

Collectives™ on Stack Overflow

How can i assign php variables for different div classes in bootstrap?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related