Show text from alt under a Img on click

Show text from alt under a Img on click - javascript

I want to make a function which can show the alt of an image.
I'm using bootstrap and made a function which displays an image when I click on the thumbnail.
But I want it also to print or show the alt below the image when I click on the thumbnail.
I'll try my best but if you guys can help me out, I'd be really grateful!
Here is my code:
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
//imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
.expandedImg .img {
max-width: 150px;
}
.thumbnailContainer {
overflow-y: none;
width: 180px;
height: 40vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<!--Thumbnail START-->
<div class="thumbnailContainer">
<img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="myFunction(this);">
</div>
<!--Thumbnail END-->
</div>
<div class="col-md-9 ">
<!--main content-->
<div class="container expandedImgSize d-flex justify-content-center ">
<span onclick="this.parentElement.style.display='none'"></span>
<img class="img-fluid" id="expandedImg" src="PLACEHOLDER IMG">
<div>
<!--here the caption/text below the image shown after a click-->
</div>
</div>
Thanks in advance for you guys!

I was actually able to create it without using the id - since you're passing "this" to your function, all you need to do is create a new element and do img.parentNode.insertBefore(newNode, img.nextSibling);. That being said, it might be better to add an id instead. Here's a working example:
function showAlt(imgNode) {
const altNode = document.createElement("p");
altNode.innerHTML = imgNode.alt;
imgNode.parentNode.insertBefore(altNode, imgNode.nextSibling);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<section class="container">
<div class="thumbnailContainer">
<img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="showAlt(this);">
</div>
</section>
</body>
</html>
and in case you want to play with the code a bit, here's a JSFiddle - https://jsfiddle.net/AJax201222/6dz18hwa/13/

As imvain2 suggested in the comments, you just need to add the id to the div and uncomment the imgText.innerHTML = imgs.alt; line and it should work.
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
.expandedImg .img {
max-width: 150px;
}
.thumbnailContainer {
overflow-y: none;
width: 180px;
height: 40vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<!--Thumbnail START-->
<div class="thumbnailContainer">
<img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE"
class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;"
onclick="myFunction(this);">
</div>
<!--Thumbnail END-->
</div>
<div class="col-md-9 ">
<!--main content-->
<div class="container expandedImgSize"> <!-- <== change this part to show the imgtext below the expandedImg -->
<span onclick="this.parentElement.style.display='none'"></span>
<img class="img-fluid" id="expandedImg" src="PLACEHOLDER IMG">
<div id="imgtext">
<!--here the caption/text below the image shown after a click-->
</div>
</div>
</div>
</div>

Related

Get html element

I try to accomplish to make a chatbot but sounds like I have a problem on my code but no errors come up. I tried to debug the code but no errors come. I tried to get the message on the chat container, but in the main.js -when I try to access the input type text value. When I try let messageText = textbox.value; the .value does not exist. I can't see any error. Apparently this is my index.html file.
Also I have try to change to var textbox = document.getElementById('mytextbox').value; when clicked nothing happens and the text inside of the input is not created in chat container.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="ChatBot">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Helder Ventura">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ChatBot</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-center">Awesome Chatbot App</h1>
<div class="media">
<img class="rounded-circle float-left img-thumbnail" width="75px" src="https://i.imgur.com/8BlgN6L.png" alt="Generic placeholder image">
<div class="media-body">
<h5 style="margin:10px">ChatBot</h5>
<span style="margin-left: 10px;">Online</span>
</div>
</div>
<!--Messages Container-->
<div id="chatContainer" class="container border overflow-auto" style="height:500px">
<!--Chatbot message design-->
<div class="w-50 float-start shadow-sm" style="margin: 10px; padding: 5px;">
<span>Chat: </span>
<span style="margin-top: 10px; padding: 10px;">How are You?</span">
</div>
<!--User message design-->
<div class="w-50 float-end shadow-sm" style="margin: 10px; padding: 5px;">
<span>You: </span>
<span style="margin-top: 10px; padding: 10px;">Great</span">
</div>
</div>
<div class="input-group">
<input id="mytextbox" type="text" class="form-control"/>
<div class="input-group-append">
<button id="sendBtn" type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<script scr="js/main.js"></script>
</body>
</html>
and this is my main.js file
//elements
var sendBtn = document.getElementById('sendBtn');
var textbox = document.getElementById('mytextbox');
var chatContainer = document.getElementById('chatContainer');
function sendMessage(messageText){
var messageElement = document.createElement('div');
messageElement.classList.add('w-50');
messageElement.classList.add('float-end');
messageElement.classList.add('shadow-sm');
messageElement.style.margin ="10px";
messageElement.style.padding ="5px";
messageElement.innerHTML = "<span>You: </span>"+
"<span style='margin-top:10px; padding:10px'>"+ messageText +"</span>";
chatContainer.appendChild(messageElement);
}
sendBtn.addEventListener('click', function(e){
let messageText = textbox.value;
console.log(e);
sendMessage(messageText);
});

Your JS code is fine.
The issue is <script scr="js/main.js"></script>
You have a typo in scr="js/main.js" should be src="js/main.js

var sendBtn = document.getElementById('sendBtn');
var textbox = document.getElementById('mytextbox');
var chatContainer = document.getElementById('chatContainer');
function sendMessage(messageText){
var messageElement = document.createElement('div');
messageElement.classList.add('w-50');
messageElement.classList.add('float-end');
messageElement.classList.add('shadow-sm');
messageElement.style.margin ="10px";
messageElement.style.padding ="5px";
messageElement.innerHTML = "<span>You: </span>"+
"<span style='margin-top:10px; padding:10px'>"+ messageText +"</span>";
chatContainer.appendChild(messageElement);
}
sendBtn.addEventListener('click', function(e){
let messageText = textbox.value;
textbox.value = "";
sendMessage(messageText);
});
<body>
<div class="container">
<h1 class="text-center">Awesome Chatbot App</h1>
<div class="media">
<img class="rounded-circle float-left img-thumbnail" width="75px" src="https://i.imgur.com/8BlgN6L.png" alt="Generic placeholder image">
<div class="media-body">
<h5 style="margin:10px">ChatBot</h5>
<span style="margin-left: 10px;">Online</span>
</div>
</div>
<!--Messages Container-->
<div id="chatContainer" class="container border overflow-auto">
<!--Chatbot message design-->
<div class="w-50 float-start shadow-sm" style="margin: 10px; padding: 5px;">
<span>Chat: </span>
<span style="margin-top: 10px; padding: 10px;">How are You?</span>
</div>
<!--User message design-->
<div class="w-50 float-end shadow-sm" style="margin: 10px; padding: 5px;">
<span>You: </span>
<span style="margin-top: 10px; padding: 10px;">Great</span>
</div>
</div>
<div class="input-group">
<input id="mytextbox" type="text" class="form-control"/>
<div class="input-group-append">
<button id="sendBtn" type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
You got some typos in your HTML file, remove the " from spans closing tag in <span style="margin-top: 10px; padding: 10px;">How are You?</span">
and
<span style="margin-top: 10px; padding: 10px;">Great</span">
After that the messages appear and it seems to work.
EDIT:
I missed the miss spell on the script tag where you miss spelled src with scr thanks for pointing it out.

Add multiple thumbnails in figure

I have a figure and a figcaption and I would like to have one picture and when I click on it, have more thumbnails/pictures.
My figure :
<!-- Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="col-6 col-lg-3">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<img src="https://picsum.photos/300/100" alt="loupe.svg">
</figcaption>
<br>
<img src="https://picsum.photos/300/101" alt="imagexs.jpg">
</figure>
</div>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Thank you.

One way you could do it would be to set the intital display of images to none and on click display them
$(document).ready(function() {
var MoreImages = document.getElementById("moreImages");
var ShowImages = document.getElementById("showImages");
MoreImages.style.display = "none";
ShowImages.addEventListener("click", function() {
document.getElementById("moreImages").style.display = "";
});
});
img {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<span id="showImages"
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</figcaption>
<div class="row" id="moreImages">
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
</div>
</figure>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

Bootstrap modal don't appear

I got problem with modals in my portfolio website. They dont show up. Trying to search for similar issues but non of answer help me in this case. I'm using bootstrap and jquery 3.3.1 and on that config modal dont show up. However when I change jquery to older for example 2.2.4 modals working fine but in my portfolio gallery with images sorting by class using script i written animation slideUp/slideDown stop working even when they was working on jquery 3.3.1.
Here is the head:
<head >
<!-- HTML -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- SKRYPTY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/filtr.js"></script>
<script src="js/scroll.js"></script>
<!-- CZCIONKI -->
<link href="https://fonts.googleapis.com/css?family=Nova+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet">
Portfolio part of body:
<div class="container" id="portfolioSection">
<h1>PORTFOLIO<br>-----</h1>
<div class="kategorie">
<p class="kategoria" id="all">All</p>
<p class="kategoria" id="www">Web Design</p>
<p class="kategoria" id="logos">Logo</p>
<p class="kategoria" id="opak">Opakowania</p>
<p class="kategoria" id="druk">Materiały do druku</p>
<p class="kategoria" id="3d">3D</p>
</div>
<div class="portfolio-container">
<div class="portfolio-item-container portfolio-item druk">
<img class="img-responsive" src="img/lordis.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item www">
<img class="img-responsive" src="img/strona.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item logos">
<img class="img-responsive" src="img/sr.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item 3d ">
<img class="img-responsive" src="img/butelka.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item opak">
<img class="img-responsive" src="img/Opakowania.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
</div>
</div>
And script for gallery fillter:
$(document).ready(function () {
$('.kategoria').click(function () {
var kategorie = $(this).attr('id');
if (kategorie == 'all') {
$('.portfolio-item').slideUp(390);
setTimeout(function () {
$('.portfolio-item').slideDown(390);
}, 400);
} else {
$('.portfolio-item').slideUp(390);
setTimeout(function () {
$('.' + kategorie).slideDown(390);
}, 400);
}
});
Right now I was trying just to add a regular modal example from bootstrap site.
Maybe anyone had a similar issue and is able to help.
--EDIT--
And here is modal button:
<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>
But i cant past modal as it is because showing me some error in code but i dont see it. I just copy the example modal from bootstrap page -> components -> modal.
The edistor showing only that:
Modal title × ... Close Save changes

Creating a light box from scratch with jQuery

I have an image gallery that I created with jQuery, it works very well when I click on each image and it appears in another div. Everything was created with Bootstrap. But I would also like to add a prev and back arrow buttons and I have no clue on how to do that.
This is the HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.selected { border: 2px solid #000; }
.output img {
margin:0 auto;
}
</style>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="JS/lightbox.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container container-fluid ">
<div class="row text-center gallery">
<h2>Gallery</h2>
<div class="col-sm-4 ">
<p>Dimebag</p>
<img src="http://img.wennermedia.com/article-leads-horizontal/rs-3616-rectangle.jpg" class="img-responsive" alt="Dimebag">
</div>
<div class="col-sm-4 ">
<p>Zack Wylde</p>
<img src="http://loudwire.com/files/2016/05/Ozzfest-Knotfest-ZakkSabbath-20160512-KathyFlynn-4393.jpg?w=630&h=420&zc=1&s=0&a=t&q=89" class="img-responsive" style="width:100%" alt="Zack">
</div>
<div class="col-sm-4 ">
<p>Slash</p>
<img src="http://mmusicmag.com/m/wp-content/uploads/2015/01/Slash-Issue-No37.jpg" class="img-responsive" style="width:100%" alt="Slash">
</div>
</div><!--row-->
<hr>
<div class="row ">
<div class="text-center arrows">
<a class="prev" >❮</a>
<a class="next" >❯</a>
</div><!--arrows-->
<div class="col-md-12 output"></div>
</div><!--row-->
</div>
</div><!--container-fluid-->
</body>
</html>
And this is the jQuery code:
$(document).ready(function(){
$(".output").hide();
$(".arrows").hide();
$('img').click(function(){
$(".output").html('<img class="img-responsive " src="' + $(this).attr('src') + '"/>').fadeIn();
$(".arrows").fadeIn();
});//click
//Arrows
$('.next').click(function(){
//Code Here
});//next
});
I know that I have to add some coding in the function that target the arrow with the class next but Im not sure what.

Sliding of an image using carousel

I have problem with carousel,
I have tried a lot, but I am not able to solve
I have one carousel with 4 images.Here i want to like in 1st iteration:
1-2-3-4
2nd iteration: 4-5-6-7
3rd iteration:7-8-9-10
this will when we click on corousel.
here is my code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="CustomStyles.css" rel="stylesheet">
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: false
})
$('.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));
}
});
});
</script>
<style>
.carousel-inner .active.left { left: -25% ; }
.class-inner .active.right{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;}
</style>
</head>
<body>
<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"><img src="1.jpg" href="sa.html" class="img-responsive">1</div>
</div>
<div class="item">
<div class="col-md-3"><img src="2.jpg" class="img-responsive">2</div>
</div>
<div class="item">
<div class="col-md-3"><img src="3.jpg" class="img-responsive">3</div>
</div>
<div class="item">
<div class="col-md-3"><img src="4.jpg" class="img-responsive">4</div>
</div>
<div class="item">
<div class="col-md-3"><img src="5.jpg" class="img-responsive">5</div>
</div>
<div class="item">
<div class="col-md-3"><img src="6.jpg" class="img-responsive">6</div>
</div>
<div class="item">
<div class="col-md-3"><img src="7.jpg" class="img-responsive">7</div>
</div>
<div class="item">
<div class="col-md-3"><img src="8.jpg" class="img-responsive">8</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>
</body>
</html>

I think it would be better to use a different carousel:
http://bxslider.com/examples/carousel-dynamic-number-slides
It's easy to use and responsive ;)

Here you find exactly what you want.
http://kenwheeler.github.io/slick/
Please find below working demo.
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
</style>
</head>
<body>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Show text from alt under a Img on click - javascript

Related

Get html element

Add multiple thumbnails in figure

Bootstrap modal don't appear

Creating a light box from scratch with jQuery

Sliding of an image using carousel

Categories

Resources