I have, after many tutorials and lots of time, managed to build a slider with jQuery. However, it's not working as smoothly as I would have hoped. I have used a custom handle, and seeing as the new jQueryUI doesn't have a handle option, I have created a handle in CSS. However, this handle is going beyond the required bounds of the slider. I have uploaded a test page which can be found here.
My code is as follows:
CSS
<style type="text/css" media="screen">
<!--
body {
padding: 0;
font: 1em "Trebuchet MS", verdana, arial, sans-serif;
font-size: 100%;
background-color: #212121;
margin: 0;
}
h1 {
margin-bottom: 2px;
}
#container {
background-color: #fff;
width: 580px;
margin: 15px auto;
padding: 50px;
}
/* slider specific CSS */
.sliderGallery {
background: url(productbrowser_background_20070622.jpg) no-repeat;
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 560px;
}
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}
.slider {
width: 542px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
}
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
.ui-slider-handle {
position: absolute;
cursor: default;
height: 17px;
top: 0;
background: url(productbrowser_scroller_20080115.png) no-repeat;
z-index: 100;
}
.slider span {
color: #bbb;
font-size: 80%;
cursor: pointer;
position: absolute;
z-index: 110;
}
.slider .slider-lbl1 {
left: 50px;
}
.slider .slider-lbl2 {
left: 220px;
}
.slider .slider-lbl3 {
left: 156px;
}
.slider .slider-lbl4 {
left: 280px;
}
.slider .slider-lbl5 {
left: 455px;
}
-->
</style>
jQuery
<script src="jqueryui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth() + 50;
$('.handle', container).slider({
min: -50,
max: itemsWidth,
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
Body
<div id="container">
<div class="sliderGallery">
<ul>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
</ul>
<div class="slider ui-slider">
<div class="handle"></div>
<span class="slider-lbl1">Our Books</span>
<span class="slider-lbl2">Other Books</span>
</div>
</div>
</div>
What I'd like to know is if there is any way to force the slider bar to stay inside the image behind it? The test link will let you understand what I mean if I didn't explain myself clearly.
Thanks in advance,
Dronnoc
The problem is coming from the fact that your handle is set to go outside of it's container.
The two problems are coming from the following
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
The second line says that the slider is allowed to go 90px before the left of it's initial container (hence the left overflow)
And when setting the left of the handle to 100%, it means that it will overflow on the right from 90px (180-90).
The way I would handle that would be to drop the margin-left:-90px;, to reduce the width of the scrolling div by 180px and to use another div to display the scroll bar image (positioned under your sliding div, but wider).
Something like:
.slider {
width: 362px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
}
.ui-slider .ui-slider-handle {
width:180px;
}
.sliderImg{
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
/*add css to position it correctly here*/
}
EDIT: To answer to your comment, the following correction to the CSS on your page should make that work:
.slider {
/*let the rest as is*/
margin-left: 90px;
}
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
This combination will let it with the same boundaries (-90 + 90 = 0 ) but are going to make it move nicely.
EDIT2:
TO enable the click on the handle, you'll need to specify a height to your handle (otherwise you wouldn't be able to click on it). However this will move your span under the sliding div, to overcome it you'll have to specify their top position (as you already have them in absolute it's easy ;) ).
The following should do.
.handle {
height: 100%;
}
.slider span {
/*let the rest as is*/
top: 0;
}
To make that work above the span, you'll need to change your html a bit like that:
<div class="handle">
<span id="slider-tags" class="slider-lbl1">Our Books</span>
<span id="slider-tags" class="slider-lbl2">Other Books</span>
</div>
Related
I am learning HTML and CSS and I am trying to replicate Apple website as my first real project. I am having trouble with the images, the first image is overblown out of proportion, it is way too big than it actually is. The other two images proportions are fine, however, they are pushed to the right of the screen even though I have the parents div width set to 100%, and these child elements set accordingly to the page. Please have a look and tell me what I am doing wrong. Thank you.
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>Apple</title>
<link rel="stylesheet" href="./apple2.css" type="text/css">
</head>
<div id="wrapper">
<body>
<nav> <!--Main navigation of the site-->
<ul>
<li>Mac</li>
<li>iPad</li>
<li>iPhone</li>
<li>Watch</li>
<li>TV</li>
<li>Music</li>
<li>Support</li>
</ul>
</nav>
<div id="content">
<div class="airpodspro"> <!--div class 1 of main content-->
<h1>Airpods Pro</h1>
<h4>Magic like you've never heard</h4>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
<div class="iphone11pro"> <!--div class 2 of main content-->
<h1>iPhone 11 Pro</h1>
<h4>Pro cameras. Pro display. Pro performance</h4>
<h6>From $24.95/mo. or $599 with trade-in.</h6>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
<div class="iphone11"> <!--div class 3 of main content-->
<h1>iPhone 11</h1>
<h4>Just the right amount of everything</h4>
<h6>From $16.62/mo. or $399 with trade-in.</h6>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
</div>
</body>
</div>
.html {
font-size: 22px;
}
body {
font-family: Helvetica;
}
html body{
margin:0;
padding:0;
}
img {
max-width: 100%;
}
#wrapper {
margin: auto;
position: relative;
}
nav {
position: relative;
background-color: #3d3d3d;
font-size: 0.9em;
word-spacing: 4em;
padding: 0.04%;
width: 100%;
}
ul{
list-style-type: none;
}
li{
display: inline;
color: white;
}
nav ul {
text-align: center;
}
nav a {
color: white;
}
#content {
width: 100%;
position: relative;
}
.airpodspro {
background-color: #5aa8cc;
height: 800px;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/airpods-pro-
takeover/airpods_pro__fok8ao5xkga6_large.jpg");
}
.iphone11pro {
background-color: #6fffd4;
margin-top: 53%;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/iphone-11-
pro/hero__dvsxv8smkkgi_large.jpg");
}
.iphone11 {
background-color: #dc84ff;
margin-top: 89%;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/iphone-
11/hero__dvsxv8smkkgi_large.jpg");
}
.airpodspro, .iphone11pro {
color: #ececec;
}
.iphone11pro, .iphone11 {
height: 500px;
}
.airpodspro, .iphone11pro, .iphone11 {
font-size: 1.5em;
line-height: 1em;
position: absolute;
padding: 5% 40%;
background-repeat: no-repeat;
background-size: cover;
width: 20%;
}
You are using image in CSS As background image properties.
Its better download the respective image from apple website and then use them
in img tag in your HTML. This way you will have better control over image.
Also when you are using the image the way you are already using because of the apple link, its also downloading js codes and controlling the behavior of website. So check out for it.
Thanks, me later.
I have a simple image slider with input range. I want to pick input range value and be able to fade-in and fade out images.
The problem is - my setup has to remain this way. I need to have img tags within li and need to have images as css background url under classnames.
How do i identify the current playing and transition to the next depending on where the slider is?
Requirement: If user goes to range 2 on slider, image2 should be visible. if user goes to range 4, image4 should be visible and so on.
I have been able to read the input range and locate the image with that image class.
How do I remove the "active" state of previous one and insert this new image?
Please find code attached
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
let currentImage = document.getElementsByClassName("playing");
let newImageClassName = "image"+value;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>
I am getting the input range value. Help from here is greatly appreciated! Thanks!
I was able to solve it!
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
// console.log(value);
let currentImage = document.getElementsByClassName("playing");
let removedImage = currentImage[0].classList.remove("playing");
let imageToAdd = "image"+value;
// console.log(imageToAdd);
let getElToAdd = document.getElementsByClassName(imageToAdd);
// console.log(getElToAdd);
let newEl = getElToAdd[0];
newEl.classList.add("playing");
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to make a carousel with thumbnails navigation. Something like this Carousel
Due to I don't know how much thumbnails there will be, it should be something like a slider, with previous and next buttons.
I tried with an unordered list but only the first li is shown. What is wrong with this code?
Here is my code:
.carousel {
position: relative;
margin: 0 auto;
top: 0px;
left: 0px;
width: 600px;
height: 300px;
overflow: hidden;
}
.carousel img.main
.previous {
position: absolute;
left: 0px;
height: 100%;
width: 30px;
opacity: 0;
background-color: lightblue;
}
.previous:hover {
opacity: 0.5;
}
.next {
position: absolute;
right: 0px;
height: 100%;
width: 30px;
opacity: 0;
background-color: lightblue;
}
.next:hover {
opacity: 0.5;
}
.thumbnavigator {
position: absolute;
left: 0px;
bottom: 0px;
height: 60px;
width: 100%;
opacity: 0;
background-color: purple;
}
.thumbnavigator:hover {
opacity: 0.5;
}
.thumbnavigator img {
height: 60px;
width: auto;
}
ul li {
list-style-type: none;
display: inline;
}
<div class="carousel">
<img class="main" src="http://www.car-magazine.it/wp-content/uploads/2014/12/Ferrari-Sergio3_4antSX.jpg" />
<div class="previous">
</div>
<div class="next">
</div>
<div class="thumbnavigator">
<!-- Thumbnails list slider -->
<ul>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
<li>
<img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" />
</li>
</ul>
</div>
</div>
The problem is with the following CSS rule:
.carousel img {
position: absolute;
width: 100%;
height: auto;
}
This will affect both the main image and each thumbnail, resulting in all thumbnails being stacked on top of each other, because of position:absolute.
Simply changing the selector from .carousel img to .carousel img.main will fix the issue.
Besides this, your HTML tags aren't properly closed. Below is the corrected HTML.
<div class="carousel">
<img class="main" src="http://www.car-magazine.it/wp-content/uploads/2014/12/Ferrari-Sergio3_4antSX.jpg" />
<div class="previous"></div>
<div class="next"></div>
<div class="thumbnavigator">
<ul>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
<li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li>
</ul>
</div>
</div>
i'm using ResponsiveSlides to make a slide of some pictures, but i have some issues.
First of all, automatic slide after a timeout doesn't work..
But my first problem is that i can't see the pager under the pictures, though i've enabled it! The pager is this: http://i.imgur.com/cCV4AOP.png (the number of the picture under the slide)
Sorry for my english and sorry i'm a noob on js & css..
This is my html code:
Head:
<script src="js/responsiveslides.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$("#slider").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540,
});
});
</script>
Css:
/*! http://responsiveslides.com v1.54 by #viljamis */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 90%;
padding: 0;
margin: 55px;
top: -50px;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 90%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 90%;
border: 0;
}
Slider on my html page:
<ul class="rslides" id="slider">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
Why i dont see the pager?
I haven't figured out why yet but if you switch the order in which you reference your external scripts, it fixes the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
The page links are unformatted "ul > li > a" so to get the appearance of the ResponsiveSlides website, you need to add your own CSS or modify theirs.
I have looked at the very helpful suggestions for the css for handling a bunch of exactly overlapping transparent images placed on a non-transparent image (in my case, a map but not a google-type map, just a line drawing). Could someone help me with turning that into a slideshow? I want to progressively stack images directly on top of each other so that the user sees an accumulation of visual information.
Here's a very simplified implementation: http://jsfiddle.net/r7B4n/
JavaScript:
$('#showNext').click(function(e){
e.stopPropagation();
$('#slideShow li:hidden:first').fadeIn();
});
CSS:
#slideShow {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #444;
list-style: none;
margin: 0;
padding: 0;
background: url(http://dummyimage.com/300x200/ccc/fff)
}
#slideShow li {
position: absolute;
left: 0; top: 0;
display: none
}
HTML:
<ul id="slideShow">
<li><img src="http://i.stack.imgur.com/hCTLO.png" /></li>
<li><img src="http://i.stack.imgur.com/Zm25l.png" /></li>
<li><img src="http://i.stack.imgur.com/3Rtc5.png" /></li>
<li><img src="http://i.stack.imgur.com/cg3MF.png" /></li>
</ul>
Show next image