Hello kinda new here,
I just want my all images from my instafeed will all be the same size, shouldn't be distorted and image will resize freely (responsive), and i want it to look exactly like this
enter image description here
I tested it here http://jsfiddle.net/jazzu20/1c9yf61x/
<div class="livery-instafeed-section col-md-12">
<div id="instafeed">
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/89fRuosLje/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
</a>
</div>
</div>
You can do this:
Note: The images are not same. The best you can do is to adapt the images.
CSS
#instafeed div a{
display: block;
border: solid 10px #fff;
}
#instafeed div a img{
width: 100%;
vertical-align: top;
}
DEMO HERE
ANOTHER SOLUTION
CSS
#instafeed div a{
position: relative;
display: block;
position:relative;
overflow: hidden;
height: 250px;
}
#instafeed div a img{
position: absolute;
vertical-align: top;
z-index:-1;
left: -50%;
top: -50%;
}
DEMO HERE
Related
<div class="col-lg-12 text-center">
<div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;">
</a>
</div>
</div>
I want the background image to take full height and the sub-image must align the center of the background image.
And at last it must be responsive.
Use width:100vh to make full height and use left and right make the image become center.
Use the background-size: cover to resize the background image to cover the entire container.
<div class="col-lg-12 text-center">
<div class="for-video-background" >
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" >
</a>
</div>
</div>
CSS:
body{
margin: 0;
}
img{
width:5rem;
position: absolute;
left: 47.5%;
top: 47.5%;
}
.for-video-background{
height: 100vh;
background-size: cover;
background-image: url('./assets/images/back-video.png')
}
You have to use "height:100vh"
<div class="col-lg-12 text-center">
<div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;height: 100vh">
</a>
</div>
</div>
I'm very new to Javascript so appreciate your help! I created this Owl slider (there are 2 sliders in this code), but want the second carousel to slide in the opposite direction. So the first carousel should slide left to right, and the second from right to left. However, when I add the direction:rtl to the code, it affects both carousels instead of just the bottom one. How can I amend the code so that both carousels slide in opposite directions?
You can view the codepen here --> https://codepen.io/ellie-oop/pen/KKmWLOQ or the code is copied below (HTML, JS, CSS)
Thanks!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flip Carousel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>
<body>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
Javascript
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
center: true,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:false,
responsive:{
0:{
items:1,
nav:false
},
600:{
items:3,
nav:false
},
1000:{
items:3,
nav:false
}
}
})
})
</script>
CSS
*, *:before, *:after{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
body{
font-size: 16px;
}
.main-title{
color: #2d2d2d;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0;
}
.ewmcontainer{
padding: 1em 0;
float: left;
width: 100%;
}
#media screen and (max-width: 640px){
.ewmcontainer{
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px){
.ewmcontainer{
width: 100%;
}
}
.ewmcontainer .title{
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
.ewmcontent {
position: relative;
width: 95%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
.ewmcontent .ewmcontent-overlay {
background: #0070bb;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.ewmcontent:hover .ewmcontent-overlay{
opacity: 0.9!important;
z-index: 1;
}
.content-image{
width: 100%;
}
.content-details {
position: absolute;
z-index: 2;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.ewmcontent:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-top{
top: 20%;
}
You can create one $(document).ready(function() for each carousel, with a unique html element ID (<div id="example-carousel">) so each script call only one single carousel. You can also use unique class names (<div class="example-carousel">) Each carousel can now take in a different configuration object. For example:
$(document).ready(function(){
$("#carousel-top").owlCarousel({
config: etc
}
})
})
$(document).ready(function(){
$("#carousel-bottom").owlCarousel({
config: etc
}
})
})
I use js to load big image whent hover to list thumbnail ok. but don't work to multiple.
How to: hover .thumbs .item of boximg_01 or boximg_02 .... loading only image in boximg_1 or boximg_02 width one js function. multiple boximg_* loading img only of element.
Now when hover thumbs img of boximg_01 it run 2 big img on both boximg_01 & boximg_02
$(document).ready(function() {
$(".box-image .thumbs img").hover(function() {
var imgpath = $(this).attr("dir");
$(".box-image .image").html("<img src=" + imgpath + ">");
});
});
#image {
max-width: 348px;
margin: 0 auto;
float: left;
background: red;
}
#thumbs, .thumbs {
width: 100%;
margin: 0 auto;
display: flex;
float: left;
}
.thumbs .item {width: 100px; height: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/1/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/3/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
</div>
</div>
Use DOM navigation relative to this to find the related image.
$(document).ready(function() {
$(".box-image .thumbs img").hover(function() {
var imgpath = $(this).attr("dir");
$(this).closest(".box-image").find(".image").html("<img src=" + imgpath + ">");
});
});
#image {
max-width: 348px;
margin: 0 auto;
float: left;
background: red;
}
#thumbs, .thumbs {
width: 100%;
margin: 0 auto;
display: flex;
float: left;
}
.thumbs .item {width: 100px; height: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/1/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/3/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
</div>
</div>
I've set up a animated masonry gallery with filters using this along with fancybox pop up.
What I'm trying to set up is a script that will remove the inline data-fancybox="gallery" which groups them together and allows users to scroll through the entire gallery.
When one of the filter links is clicked, it adds a "isotope-hidden" class to the images and hides them however it still belongs to the data-fancybox="gallery" so is still able to be accessed by when the pop up is enabled. I wanted to set up a script to remove this value if a specific class is found on the image.
Here is my attempted script.
How can i remove the data-fancybox="gallery" that's in the parent div of the image tag if "isotope-hidden" class is added to the image tag?
jq('.filterbutton').click(function () {
if (jq("isotope .item img").hasClass("isotope-hidden")) {
jq(".isotope .item .img").parent().attr("data-fancybox", "");
} else if (jq("sotope .itme .img").hasClass("isotope-item")) {
jq(".isotope .item .img").parent().attr("data-fancybox", "gallery");
}
});
#gallery-header-center-right{
display: inline-block;
width: 100%;
margin: 10px 0;
}
.gallery-header-center-right-links {
color: #333333;
float: left;
height: 35px;
padding-right: 20px;
padding-left: 20px;
margin-left: 20px;
font-size: 16px;
font-weight: 400;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
transition: background 0.5s;
}
.gallery-header-center-right-links:hover {
background-color: rgba(63,141,191,1);
color: rgba(255,255,255,1);
cursor: pointer;
}
.gallery-header-center-right-links-current {
color: #FFFFFF;
background-color: rgba(63,141,191,1);
}
.gallery-header-center-right-links-current:hover {
background-color: rgba(63,141,191,0.5);
}
.filterbutton{
margin: 5px;
float: left;
}
.item{
width: 320px;
float: left;
margin: 5px;
}
.item img{
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
<div id="gallery-header">
<div id="gallery-header-center">
<div id="gallery-header-center-right">
<div class="gallery-header-center-right-links filterbutton" id="filter-all">All</div>
<div class="gallery-header-center-right-links filterbutton" id="filter-kw17">KW17</div>
<div class="gallery-header-center-right-links filterbutton" id="filter-kw16">KW16</div>
</div>
</div>
</div>
<div id="gallery-content">
<div id="gallery-content-center">
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-jordan.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-jordan.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF2.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF2.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-KWF3.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-KWF3.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-remix-mag.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-remix-mag.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/a-sammy.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/a-sammy.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/BeautyEQLoveridge.png" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/BeautyEQLoveridge.png" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/kwwomensweekly.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/kwwomensweekly.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/kylie.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/kylie.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/myraboot.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/myraboot.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/next.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/next.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/nextj.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/nextj.jpg" class="all kw17"/>
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/snuggle.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/snuggle.jpg" class="all kw16">
</a>
<a class="item" href="http://develop.e-retailer.co.nz/user/files/sundaymag.jpg" data-fancybox="gallery">
<img src="http://develop.e-retailer.co.nz/user/files/sundaymag.jpg" class="all kw17"/>
</a>
</div>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Here is the basic html code and css code I used.
.scroll {
overflow: scroll;
overflow-x: scroll;
overflow-y: hidden;
max-height: 180px !important;
max-width: 1100px !important;
position: relative;
outline: none;
direction: ltr;
}
<div class="well">
<div class="scroll">
<a href="home.html">
<img src="images/cupertino.jpg" alt="..." class="image-rounded-active">
</a>
<a href="home.html">
<img src="images/saratoga.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="images/sunnyvale.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="images/milpitas.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="images/santa-clara.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="images/san-mateo.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="images/cupertino.jpg" alt="..." class="image-rounded-active">
</a>
</div>
</div>
Can someone please help me to get an horizontal scroll bar?
Use overflow to allow scrollbars.
.well {
width: 300px;
height: 60px;
overflow-y: hidden;
overflow-x: auto;
}
.scroll {
width: 450px;
}
.scroll a {
float: left;
margin: 0 10px;
}
<div class="well">
<div class="scroll">
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded-active">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded">
</a>
<a href="home.html">
<img src="http://lorempixel.com/output/fashion-q-g-60-60-5.jpg" alt="..." class="image-rounded-active">
</a>
</div>
</div>
add following css -
.scroll { width: 990px; overflow-x: scroll; } /*define the width value to the point from where you want horizontal scroll*/
by css you can achieve this
.scroll{
overflow-x:scroll;
height:200px;
width:400px;
}
by jquery
$(document).ready(function(){
$(".scroll").css({'overflow-x':'scroll','height':'200px','width':'400px'});
})
Try this
.scroll {
width: 100%;
height: 100%;
overflow-x: scroll;
white-space: nowrap;
display: inline-block;
width: 300px;
margin: 10px;
}
DEMO FIDDLE
Please check the below fiddle:
JSFiddle
.scroll {
width: 300px;
}
.scroll a {
float: left;
}
.well {
width: 150px;
height: 60px;
overflow-y: hidden;
overflow-x: auto;
}
You have to set overflow property to auto or scroll.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with
scrollbars appearing and disappearing in a dynamic environment.
Printers may print overflowing content.
auto
Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
body {
margin: 0;
}
.well {
width: 100%;
}
.scroll {
width: 100%;
background: blue;
overflow: auto;
white-space: nowrap;
}
.scroll a {
display: inline-block;
width: 140px;
margin: 10px;
}
.scroll a img {
width: 100%;
}
<div class="well">
<div class="scroll">
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded-active">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded">
</a>
<a href="#">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="..." class="image-rounded-active">
</a>
</div>
</div>
Reference: MDN - overflow