I made a Netflix clone site, I want to put mouse scrolling or right and left arrows to scroll the movie posters left and right, how can I do this?. Currently, the banners scroll only with the middle mouse button and it is very difficult. I would appreciate if you could help me with this. I am new to software.
My site:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benim Listem</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Banner -->
<div class="banner" id="banner">
<video id="video" class="banner" poster="images/videoframe.jpg" style="pointer-events:none;">
<source src="images/bridgerton.mp4" type="video/mp4" />
</video>
<div class="banner__contents">
<h1 class="banner__title">Bridgerton</h1>
<div class="banner__buttons">
<button class ="banner__button" id="btnPlayPause" accesskey="p" onclick="playPauseVideo()">Play</button>
<button class ="banner__button">My list</button>
</div>
<div class="banner__desc">
Büyük şehirden gelen bir diş hekimi, küçük bir sahil kasabasında muayenehane açar. Burada her bakımdan onun tam zıddı olan becerikli ve yakışıklı bir adamla tanışır.
</div>
</div>
</div>
<!-- Netflix Orginals -->
<div class="row first">
<h2>En sevdiğim Film ve Diziler</h2>
<div class="row_posters">
<img src="images/1.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/2.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/3.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/4.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/5.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/6.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/7.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/8.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/9.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/10.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/11.jpg" alt="" class="row_poster row_posterLarge"/>
<img src="images/12.jpg" alt="" class="row_poster row_posterLarge"/>
</div>
</div>
<!-- Trending Now -->
<div class="row">
<h2>Trending Now</h2>
<div class="row_posters">
<img src="images/93.jpg" alt="" class="row_poster"/>
<img src="images/94.jpg" alt="" class="row_poster"/>
<img src="images/95.jpg" alt="" class="row_poster"/>
<img src="images/96.jpg" alt="" class="row_poster"/>
<img src="images/97.jpg" alt="" class="row_poster"/>
<img src="images/98.jpg" alt="" class="row_poster"/>
<img src="images/99.jpg" alt="" class="row_poster"/>
<img src="images/100.jpg" alt="" class="row_poster"/>
<img src="images/93.jpg" alt="" class="row_poster"/>
<img src="images/94.jpg" alt="" class="row_poster"/>
<img src="images/95.jpg" alt="" class="row_poster"/>
<img src="images/96.jpg" alt="" class="row_poster"/>
<img src="images/97.jpg" alt="" class="row_poster"/>
<img src="images/98.jpg" alt="" class="row_poster"/>
<img src="images/99.jpg" alt="" class="row_poster"/>
<img src="images/100.jpg" alt="" class="row_poster"/>
</div>
</div>
<script>
player = document.getElementById('video');
btnPlayPause= document.getElementById('btnPlayPause');
player.addEventListener('play', function(){
changeButtonType(btnPlayPause, 'Pause');
}, false)
player.addEventListener('pause', function(){
changeButtonType(btnPlayPause, 'Play');
}, false);
function playPauseVideo(){
if (player.paused || player.ended) {
changeButtonType(btnPlayPause, 'Pause');
player.play();
} else {
changeButtonType(btnPlayPause, 'Play');
player.pase();
}
}
function changeButtonType(btn,value){
btn.title = value;
btn.innerHTM = value;
}
</script>
</body>
</html>
CSS Code:
*{
margin: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #111;
}
.row_poster{
width: 100%;
object-fit: contain;
max-height: 100px;
margin-right: 10px;
transition: transform 450ms;
}
.row_posters{
display: flex;
overflow-y: hidden;
overflow-x: scroll;
padding: 20px;
}
.row_poster:hover{
transform:scale(1.00);
}
.row_posters::-webkit-scrollbar{
display: none;
}
.row_posterLarge {
max-height: 250px;
}
.row_posterLarge:hover{
transform: scale(1.09);
}
.row{
color: white;
margin-left: 20px;
}
.first{
margin-top: 3%;
}
.banner{
position: relative;
color:white;
object-fit: cover;
height: 550px;
width: 100%;
}
#banner:after {
content: '';
position: absolute;
left:0;
bottom:0;
width: 100%;
height: 100px;
background-image: linear-gradient(to top, #111, transparent);
}
.banner__contents{
position: relative;
margin-left: 30px;
height: 190px;
margin-top: -15%;
}
.banner__title{
font-size: 3rem;
font-weight: 900;
padding-bottom: 0.3rem;
}
.banner__desc{
width: 45rem;
line-height: 1.3;
padding-top: 1rem;
font-size: 0.8rem;
max-width: 360px;
height: 180px;
}
.banner__button{
cursor: pointer;
color: white;
outline: none;
border: none;
font-weight: 800;
border-radius: 0.2vw;
padding-left: 2rem;
padding-right: 2rem;
margin-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: rgba(51, 51, 51,0.5 );
}
.banner__button:hover{
color: #000;
background-color: #e6e6e6;
transition: all 0.2s;
}
Related
There is a white space before the image in the second row. I don’t know why this is happening.
Margin and padding are fine.
All images are of the same size, but there is white space on the second row before the image. 2 more images can fit in there.
Upon inspecting it's just showing white space from the body.
No excess margin or padding is there from any of the images.
Used – "float: left;"
The images on the third row and further are fine.
Can someone figure out the issue, why is this happening?
Click to see image
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="gallery.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,800&display=swap" rel="stylesheet">
</head>
<body>
<p>Photo Gallery</p>
<img src="a (1).jpg">
<img src="a (2).jpg">
<img src="a (3).jpg">
<img src="a (4).jpg">
<img src="a (5).jpg">
<img src="a (6).jpg">
<img src="a (7).jpg">
<img src="a (8).jpg">
<img src="a (9).jpg">
</body>
</html>
CSS File:
img{
width: 30%;
float: left;
margin: 1.66%;
padding: 0;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
This is happening because the images are of different height. The best solution with display block layout will be using a width to the image and setting the display: inline-block
img{
width: 30%;
/* margin: 1.66%; */
padding: 0;
display: inline-block;
vertical-align: middle;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<div class="image-container">
<img src="https://www.w3schools.com/html/img_girl.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
</div
Or else you can go for flex display. This will ensure that the child elemets are of same height, without explicitly mentioning the height.
.image-item {
display: flex;
flex-direction: column;
width: 30%;
margin: 1.66%;
padding: 0;
justify-content: center;
}
img{
width: 100%;
}
.image-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
p {
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width: 30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<div class="image-container">
<div class="image-item">
<img src="https://www.w3schools.com/html/img_girl.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
</div>
It's the margin property.
img{
width: 30%;
float: left;
margin: 0 1.66%;
padding: 0;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
【 ALL RESOLVED 】(comment reference)
Problem
I want to centrally align figcaption below to.meter.
But the frame of the parent element gets in the way and will not work out a bit.
e.g. Vectorworks (Because the characters are longer than .meter)
And what matters is that I want to vary based on .meter. (That's it already)
Is there any good way to do it?
Complete image
▼ Decomposition of effect
▼ The current situation is as per the code snippet.
code
html { font-size: 62.5%; }
.data {
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
.skill li {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.skill li :last-child {
margin-right: 0;
}
.code {
margin-top: 1.7rem;
}
figure {
margin-right: .9rem;
margin-bottom: 2.1rem;
font-size: 1rem;
position: relative;
height: 4.4rem;
}
figure > img {
top: 0;
bottom: 0;
}
figure > .meter {
height: 4.4rem;
position: absolute;
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
figure > figcaption {
position: absolute;
line-height: 1;
text-align: center;
bottom: -1.5rem;
left: 0;
right: 0;
margin: 0 auto;
}
.meter-t {
height: 2.3rem;
display: block;
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.PHP > .meter-t {
width: 2.4rem;
}
<section class="skill">
<p class="title">skill</p>
<ul class="data">
<li class="tool">
<figure class="Illustrator">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png" alt="advanced" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png" alt="Illustrator" />
<figcaption>Illustrator</figcaption>
</figure>
<figure class="Photoshop">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png" alt="Photoshop" />
<figcaption>Photoshop</figcaption>
</figure>
<figure class="Indesign">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png" alt="Indesign" />
<figcaption>Indesign</figcaption>
</figure>
<figure class="Vectorworks">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png" alt="Vectorworks" />
<figcaption>Vectorworks</figcaption>
</figure>
<figure class="Shade">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png" alt="Shade" />
<figcaption>Shade</figcaption>
</figure>
</li>
<li class="code">
<figure class="HTML">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png" alt="HTML" />
<figcaption>HTML</figcaption>
</figure>
<figure class="CSS">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png" alt="CSS" />
<figcaption>CSS</figcaption>
</figure>
<figure class="Javascript">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png" alt="Javascript" />
<figcaption>Javascript</figcaption>
</figure>
<figure class="PHP">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png" alt="PHP" />
<figcaption>PHP</figcaption>
</figure>
</li>
</ul>
</section>
What i did here is made figure > .meter absolute and figure > figcaption as relative. By doing so i can add text-align: center to the parent div and fix your centering of text issue. Now no matter how long the text is it will always be in the center the way you wanted it to be.
html { font-size: 62.5%; }
.data {
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
.skill li {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.skill li :last-child {
margin-right: 0;
}
.code {
margin-top: 1.7rem;
}
figure {
margin-right: .9rem;
margin-bottom: 2.1rem;
font-size: 1rem;
position: relative;
height: 4.4rem;
text-align: center;
}
figure > img {
top: 0;
bottom: 0;
}
figure > .meter {
height: 4.4rem;
position: absolute;
/* position: relative; */
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
figure > figcaption {
position: relative;
line-height: 1;
text-align: center;
bottom: -5.5rem;
/* left: 0;
right: 0;
margin: 0 auto; */
}
.meter-t {
height: 2.3rem;
display: block;
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.PHP > .meter-t {
width: 2.4rem;
}
<section class="skill">
<p class="title">skill</p>
<ul class="data">
<li class="tool">
<figure class="Illustrator">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png" alt="advanced" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png" alt="Illustrator" />
<figcaption>Illustrator</figcaption>
</figure>
<figure class="Photoshop">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png" alt="Photoshop" />
<figcaption>Photoshop</figcaption>
</figure>
<figure class="Indesign">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png" alt="Indesign" />
<figcaption>Indesign</figcaption>
</figure>
<figure class="Vectorworks">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png" alt="Vectorworks" />
<figcaption>Vectorworks</figcaption>
</figure>
<figure class="Shade">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png" alt="Shade" />
<figcaption>Shade</figcaption>
</figure>
</li>
<li class="code">
<figure class="HTML">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png" alt="HTML" />
<figcaption>HTML</figcaption>
</figure>
<figure class="CSS">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png" alt="CSS" />
<figcaption>CSS</figcaption>
</figure>
<figure class="Javascript">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png" alt="Javascript" />
<figcaption>Javascript</figcaption>
</figure>
<figure class="PHP">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png" alt="PHP" />
<figcaption>PHP</figcaption>
</figure>
</li>
</ul>
</section>
I am having problems trying to center a div containing four contact images inside of another div. The following is my HTML code for it:
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
<img class="contactImg" src="images/facebook.png" alt="Facebook"></img>
<img class="contactImg" src="images/instagram.png" alt="Instagram"></img>
<img class="contactImg" src="images/twitter.png" alt="Twitter"></img>
<img class="contactImg" src="images/snapchat.png" alt="Snapchat"></img>
</div>
</div>
And the CSS is
div#contact {
border: 1px solid red;
}
div#centeredConctact {
margin: 0 auto;
width: 50%;
}
img.contactImg {
width:50px;
height:50px;
display: inline-block;
margin: 0 auto;
}
div.infoSection {
margin-top: 15px;
padding: 0;
width: 60%;
min-width: 600px;
}
What could I do to fix this? Thank you.
Let me know if this is not what you are trying to achieve. Your question was a little vague but this is what I took from it.
div#contact {
border: 1px solid red;
width: 100%;
}
div#centeredConctact {
text-align: center;
}
img.contactImg {
width: 50px;
height: 50px;
display: inline-block;
margin:4px 1px 1px;
}
a.contactImg {
text-decoration:none;
}
div.infoSection {
margin-top: 15px;
padding: 0;
}
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email">-->
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=F" alt="Facebook">
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=I" alt="Instagram">
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=T" alt="Twitter">
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=S" alt="Snapchat">
</div>
</div>
The div is already centered.
Center the images (respectively the links) with text-algin: center.
div#contact {
border: 1px solid red;
}
div#centeredConctact {
margin: 0 auto;
width: 50%;
border: 1px solid;
text-align: center;
}
img.contactImg {
width: 50px;
height: 50px;
display: inline-block;
}
div.infoSection {
margin-top: 15px;
padding: 0;
width: 60%;
min-width: 600px;
}
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/facebook.png" alt="Facebook">
</a>
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/instagram.png" alt="Instagram">
</a>
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/twitter.png" alt="Twitter">
</a>
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/snapchat.png" alt="Snapchat">
</a>
</div>
</div>
Try using flaxbox layout like this:
div#contact {
border: 1px solid red;
display: flex;
justify-content: center
}
img.contactImg {
width: 50px;
height: 50px;
margin: 3px 1px 0;
}
div.infoSection {
margin-top: 15px;
padding: 0;
width: 60%;
min-width: 600px;
}
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
<img class="contactImg" src="http://placehold.it/50x50" alt="Facebook"></img>
<img class="contactImg" src="http://placehold.it/50x50" alt="Instagram"></img>
<img class="contactImg" src="http://placehold.it/50x50" alt="Twitter"></img>
<img class="contactImg" src="http://placehold.it/50x50" alt="Snapchat"></img>
</div>
</div>
i want to make the second div overflow-x scroll but its not working
#image_view a img{
height: 400px;
width: 600px;
margin: auto;
text-align: center;
padding-bottom: 10px;}
#thumbnail{
height: 120px;
overflow-x: scroll;
display: inline;
}
#thumbnail img{
height: 100px;
width: 100px;
margin: auto;
padding-bottom: 10px;
white-space: nowrap;}
<div class=" col-lg-12 jumbotron">
<div class="col-lg-10" id="image_view">
<img src="images/1.jpg" alt="image view">
</div>
<div class="col-lg-12" id="thumbnail">
<img src="images/10.jpg" alt="image">
<img src="images/11.jpg" alt="image">
<img src="images/3.jpg" alt="image">
<img src="images/4.jpg" alt="image">
<img src="images/5.jpg" alt="image">
<img src="images/6.jpg" alt="image">
</div>
</div>
i guess you want something like this > Jsfiddle or snippet bellow
add white-space:nowrap to the #thumbnail not to the images and it should work
let me know if this is what you want.
#image_view a img{
height: 400px;
width: 600px;
margin: auto;
text-align: center;
padding-bottom: 10px;}
#thumbnail{
height: 120px;
overflow-x: scroll;
display: inline;
white-space: nowrap;
}
#thumbnail img {
height: 100px;
width: 100px;
margin: auto;
padding-bottom: 10px;
}
<div class=" col-lg-12 jumbotron">
<div class="col-lg-10" id="image_view">
<img src="images/1.jpg" alt="image view">
</div>
<div class="col-lg-12" id="thumbnail">
<img src="images/10.jpg" alt="image">
<img src="images/11.jpg" alt="image">
<img src="images/3.jpg" alt="image">
<img src="images/4.jpg" alt="image">
<img src="images/5.jpg" alt="image">
<img src="images/6.jpg" alt="image">
</div>
</div>
I am using Tiny Scrollbar Plugin to make a tiny horizontal scrollbar to display a bunch of images inside a div in a non breaking single in reduced window size of 768 px with the help of Media Queries . When I run the above code and reduce my window size to 768 px, I got my images displaying in a single line but unfortunately i not getting any horizontal scrollbar to scroll images. I don't know where i'm doing wrong. Can anyone tell how to get a tiny horizontal scroll bar
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.tinyscrollbar.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#scrollbar1').tinyscrollbar({ axis: 'y' });
});
</script>
<style>
.overview
{
white-space: nowrap;
}
#scrollbar1
{
width: 100%;
margin: 20px 0 10px;
}
#scrollbar1 .viewport
{
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
#scrollbar1 .overview
{
list-style: none;
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0;
width: 100%;
}
#scrollbar1 .scrollbar
{
position: relative;
background-position: 0 0;
float: right;
width: 15px;
}
#scrollbar1 .track
{
background: height: 100%;
width: 15px;
position: relative;
}
#scrollbar1 .thumb
{
background-color: #e0d8b8;
border-radius: 4px;
height: 20px;
width: 8px;
cursor: pointer;
overflow: hidden;
position: absolute;
top: 0;
left: -5px;
}
#scrollbar1 .thumb .end
{
background-color: #e0d8b8;
border-radius: 4px;
overflow: hidden;
height: 20px;
width: 8px;
}
#scrollbar1 .disable
{
display: none;
}
#media screen and (max-width: 768px)
{
.overview
{
white-space: nowrap;
display: inline;
}
}
</style>
</head>
<body>
<div id="scrollbar1">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end">
</div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
<img src="Comic.jpg" alt="" />
</div>
</div>
</div>
</body>
</html>
I would suggest switching to bxslider, if you don't mind.
Here is a simple example. (Ignore white borders around the images). You should look at the options page, this slider is highly configurable.
The only disadventage for you is lack of horizontal scrolling bar. But the slider is fully responsive, so there is no need to write media-queries etc.
But, backing to your code, try to reload tinyscrollbar on window resize. If the widths change because of media queries, it's a must.
$(window).resize(function() {
// reload your tinnyscrollbar again
});