0

I'd like to have the center slide a fixed width of 960px with nearby slides visible if the window is big enough

This is how I want the slider to look like. See at the bottom of the site.

My HTML 

 <div class="col-md-12">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="col-md-12">
                    <div >
                        <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank">
                            <img class="rsImg rsMainSlideImage" alt="" src="../img/blog/justice.jpg">
                        </a>
                        <div class="text">
                            <h4>
                                LOREN IPSUM LOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUM
                            </h4>
                            <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank" class="entry-link"><i class="icon-eye"></i>Read more</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="col-md-12">
                    <div >
                        <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank">
                            <img class="rsImg rsMainSlideImage" alt="" src="../img/blog/justice.jpg">
                        </a>
                        <div class="text">
                            <h4>
                                LOREN IPSUM LOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUM
                            </h4>
                            <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank" class="entry-link"><i class="icon-eye"></i>Read more</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="col-md-12">
                    <div>
                        <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank">
                            <img class="rsImg rsMainSlideImage" alt="" src="../img/blog/justice.jpg">
                        </a>
                        <div class="text">
                            <h4>
                                LOREN IPSUM LOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUMLOREN IPSUM
                            </h4>
                            <a href="http://blog.vconnecta.com/the-public-consultation-process/" target="_blank" class="entry-link"><i class="icon-eye"></i>Read more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left" href="#carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

and I initialised it 

<script>
    $("#carousel .carousel-indicators li:first").addClass("active");
    $("#carousel .carousel-inner .item:first").addClass("active");

    $('#carousel').carousel({
        interval: 5000
    });
</script>
Nauman
  • 894
  • 4
  • 14
  • 45
  • 1
    To make things easier you could make a 960px wide container with your carousel in it and add overflow: visible; so you see nearby slides – Jonas Grumann Oct 21 '16 at 09:03
  • 1
    instead of bootstrap carousel, have a look at owl-carousel 2 `center with loop` for your problem. Here's a codepen link:http://codepen.io/Sky-123/pen/vXvmwP . In my example I have used it for screens having size of `992px` and `600px`. You can change accordingly. – Aakash Thakur Oct 21 '16 at 09:22
  • @AakashThakur I chose bootstrap so that it stays of responsive on different screen sizes. Is your carousel responsive? Thanks again. – Nauman Oct 21 '16 at 09:30
  • 1
    Yes very much..Resize it to a screen less than 600px and see the magic. – Aakash Thakur Oct 21 '16 at 09:33

0 Answers0