I'm trying to make a slide show (html/css/javasacript/whatever works) to obtain something like that :
slide show i'd like to code
With two arrows on the right/left to display more images (maximum images displayed at once would be 4).
I saw some tutorials on w3school but unfortunately it's not exactly what i wish.
Thanks for your help!
I found this on https://www.w3schools.com/howto/howto_js_slideshow.asp
I changed it so that it can display multiple images.
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="player.jpg" style="width:25%">
<img src="Untitled.jpg" style="width:25%">
<img src="Lighthouse.jpg" style="width:25%">
<img src="Untitled.jpg" style="width:25%">
<div class="text">1, 2, 3, & 4</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="Untitled.jpg" style="width:25%">
<img src="Untitled.jpg" style="width:25%">
<img src="Lighthouse.jpg" style="width:25%">
<img src="player.jpg" style="width:25%">
<div class="text">5, 6, 7, & 8</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="Untitled.jpg" style="width:25%">
<img src="Untitled.jpg" style="width:25%">
<img src="Lighthouse.jpg" style="width:25%">
<img src="player.jpg" style="width:25%">
<div class="text">5, 6, 7, & 8</div>
</div>
Related
I have a sidebar which is col-md-2. now I need to put 4 thumbnail next to each other on this sidebar that picture of them would be responsive. whith this code image become bigger when I resize the window (make window smaller)
<div class=col-md-2>
<div class=row>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div><!--end of row>
<div>
How to make carousel items navigate as a group with bootstrap 3? Rather than moving items one at a time how can we make the multiple items move at a click. For e.g. If i see slides 1,2,3 the next carousel control should display slides 4,5,6.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><img src="images\link4\Picture1.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture5.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
$('.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>0) {
next.children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
} }
});
</script>
There's no need for the extra JS. Just use the standard Bootstrap carousel...
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
</div>
http://www.codeply.com/go/Vnvl4HqgKJ
I have a footer where in section, I need it to be seperated into 4 parts. 2 up and 2 down. How to do this? I have attached the code. I have attached the image on how i wanted it.
Click to see Image
<div className="footer">
<div className="row full-width">
<div className="large-6 columns">
<div className="row">
<div className="small-12 medium-3 large-4 columns">
<img className="" src="" alt="logo"/>
<div className="contact-info">
<p className="address">address</p>
<p className="email">mail</p>
<p className="tele">53343</p>
</div>
</div>
<div className="small-6 medium-3 large-8 columns">
<div className="row">
<ul className="list-unstyled ">
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Fast Shipping</p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Free Return</p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Price Gurantee </p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Online Support</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="large-6 columns">
<div className="row">
</div>
</div>
</div>
</div>
Thanks
you should remove all the className properties from your elements and just use class. as noted in the Docs, the grid of foundation works with <div class=""> elements so you're code messes up things a bit.
read more here: http://foundation.zurb.com/sites/docs/grid.html#basics
and a scheme of the footer would be like:
<div class="row footer">
<div class="small-6 columns">
<img src="...">
<p>some text</p>
</div>
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
</div><!-- end of row -->
I am asking that i have added carousel-indicators by using Bootstrap3.and my carousel-indicator looking like rectangle shape.
I have wrote the code as i given below.
<div class="item active">
<img src="image/1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/2.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/3.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/4.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/5.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/6.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/7.jpg" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--closing carousel-->
And I Wanted my Carousel-indicator look like smaller dot.
you can draw SVG figures to use for your carousel controls, you can add an event listener to literally anything to control your carousel.
<circle cx="25" cy="75" r="20"/> Play around with the size of it, you can assign it color or other attributes as you would any other HTML element.
I am having trouble with rows and columns in Twitter Bootstrap 3. I got 5 images, which are set in 2 rows (3 in 1st row and 2 in 2nd one). They are set as col-lg-4 (3 images in a row).
<div class="row pad3">
<div class="col-lg-4 desctext">
<a href="#">
<img class="imgmargin" src="css/img/logodtll.png" alt="" />
</a>
</div>
<div class="col-lg-4 desctext">
<a href="#">
<img class="imgmargin" src="css/img/sclogonew.png" alt="" />
</a>
</div>
<div class="col-lg-4 desctext">
<a href="#">
<img class="imgmargin" src="css/img/biclogonew.png" alt="" />
</a>
</div>
</div>
<div class="row pad3">
<div class="col-lg-4 col-xs-12 desctext">
<a href="#">
<img class="imgmargin" src="css/img/adrislogo2.png" alt="" />
</a>
</div>
<div class="col-lg-4 col-xs-12 desctext">
<a href="#demo">
<img class="imgmargin" src="css/img/collection2.png" alt="" />
</a>
</div>
</div>
I want to achieve that when I reduce my window size, those columns become medium (col-md-6) and the 3rd one "spills" over into the next row. Kinda like on large screen its 3 and 2, on medium its 2-2-1. How do I achieve this? I dont know what to do with my 3rd column because he is still part of the 1st row. Is this done with media queries?
In short, when screen is large i want to have 3 images in a row, when its medium i want to have 2 images in a row and anything less than that its 1 image per row.
Thanks
The dividing row is preventing the columns from wrapping ("spillover"). Try this..
<div class="row pad3">
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/logodtll.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/sclogonew.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/biclogonew.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/adrislogo2.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#demo">
<img class="imgmargin" src="css/img/collection2.png" alt="">
</a>
</div>
</div>
Demo: http://bootply.com/93649
Also see: Bootstrap 3 - Use more than 12 columns in a row