We Keep Coding

How to fix the CSS before/after content and improve the expand/collapse function?

The sidebar menu below works as expected but there are some elements that I would like to fix and improve.
#1 If you expand the 'System Admin' section the line that is displayed on the left side a in the correct place. However, if you
click on the 'Access Control' the line eon the left side is going
below the horizontal line that's pointing to that section. I tried
fixing that with css 'last-child' method but still is not working
correct. If I change percentage from 50% to 85% then the other
section will have an issue.
#2 I'm looking for a better way to expand/collapse the sections. The function show mimic the existing one, but instead of using the object
with key items I would like to use classes instead if possible.
$( document ).ready(function() {
SIDEBAR_OLD.BASE.ExpandCollapse('Auto');
});
const SIDEBAR_OLD = {};
SIDEBAR_OLD.BASE ={};
SIDEBAR_OLD.BASE.ToggleContent = function(section_id) {
let $sContents = $("#section_" + section_id);
if ( $sContents.css("display") != "none" ) {
$sContents.css("display","none");
} else { // Default to seeing the folder's contents:
$sContents.css("display","");
}
};
$("#main-page-wrapper").on("click", ".toggle-menu", function(e){
e.preventDefault();
let section_id = $(this).attr("data-id");
SIDEBAR_OLD.BASE.ToggleContent(section_id);
});
SIDEBAR_OLD.BASE.ExpandCollapse = function(action) {
let $sContents = null,
sExpand = null,
sRoot = false,
items = {1:"m",2:"sysadmin",5:"access"};
for (key in items) {
$sContents = $("#section_" + items[key]);
switch (action) {
case "Expand":
sExpand = "Yes";
break;
case "Collapse":
sExpand = "No";
break;
default:
if ( !(sExpand = $sContents.attr("data-expand")) ) sExpand = "Yes";
}
// Never close root elements automatically. Only ToggleContent(pNumber), below, can do that.
if ( sRoot = $sContents.attr("data-root") ) { // Note! Assignment! "=", not "=="!
if (sRoot == "Yes") sExpand = "Yes";
}
if ( sExpand == "No" ) {
$sContents.css("display","none");
} else { // Default to seeing the folder's contents:
$sContents.css("display","");
}
}
return true;
};
$("#main-page-wrapper").on("click", ".collapse-menu", function(e){
e.preventDefault();
let action = $(this).attr("data-action");
SIDEBAR_OLD.BASE.ExpandCollapse(action);
});
.sidebar {
position: absolute;
top: 56px;
right: 0px;
bottom: 0px;
left: 0px;
width: 180px;
background-color: #0071bc;
color: #fff;
height: calc(100vh - 98px);
overflow: auto;
font-size: 9pt !important;
white-space: nowrap;
}
.sidebar a {
color: #fff;
}
.menuitem {
color: #fff;
font-weight: bold;
text-decoration: none;
}
.menuitem:hover, .menuitem:focus {
color: #ff0;
}
#tree {
font-weight: bold;
padding: 1px;
}
#expandcollapse {
border: 1px solid white;
text-align: center;
}
.sb-row {
border: 0px;
height: 22px;
margin: 0px;
overflow: hidden;
padding: 0px 0px 0px 3px;
position: relative;
white-space: nowrap;
}
.fa-folder-open:before {
color: #DBDB2A !important;
}
.nav>li {
position: relative;
display: block;
}
.nav>li>a {
position: relative;
display: block;
padding: 7px 22px 6px;
}
.nav>li>a:focus {
text-decoration: none;
background: transparent;
background-color: transparent;
}
.nav > li > a:hover {
color: red;
background-color: transparent;
text-decoration: none;
}
.nav.side-menu>li {
position: relative;
display: block;
cursor: pointer;
}
.nav.child_menu li {
padding-left: 20px;
}
.nav.child_menu>li>a {
font-weight: 500;
font-size: 12px;
font-weight: bold;
}
li.first-level::before {
background: #fff;
bottom: auto;
content: "";
height: 1px;
left: 10px;
margin-top: 14px;
position: absolute;
right: auto;
width: 8px;
}
li.first-level::after {
border-left: 1px solid #fff;
bottom: 0;
content: "";
left: 10px;
position: absolute;
top: 0;
}
ul.nav.side-menu li.first-level:last-child::after {
bottom: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="container body" id="main-page-wrapper">
<div class="sidebar">
<div id="tree" role="navigation" data-expandall="Auto">
<div id="expandcollapse">
<a class="menuitem collapse-menu pr-2" href="#" data-action="Expand">Expand</a> | <a class="menuitem collapse-menu pl-2" href="#" data-action="Collapse">Collapse</a>
</div>
<div class="sb-row">
<a class="toggle-menu" title="Open/Close Folder - System Management" data-id="m">
<i class="fa fa-folder-open fa-lg"></i> System Management
</a>
</div>
<div id="section_m" class="menu-section" data-root="Yes" data-expand="Yes">
<ul class="nav side-menu">
<li class="first-level">
<a class="toggle-menu" href="#" title="System Admin" data-id="sysadmin"><i class="fa fa-folder-open"></i> System Admin</a>
<ul class="nav child_menu first" id="section_sysadmin" data-expand="No">
<li><a class="link-item" data-action="param" title="System Parameters">System Parameters</a></li>
<li><a class="link-item" data-action="schema" title="Select Schema">Select Schema</a></li>
<li><a class="link-item" data-action="item" title="Menu Item">Menu Items</a></li>
</ul>
</li>
<li class="first-level">
<a class="toggle-menu" href="#" title="Access Control" data-id="access"><i class="fa fa-folder-open"></i> Access Control</a>
<ul class="nav child_menu first" id="section_access" data-expand="No">
<li><a class="link-item" data-action="user" title="Manage User">Manage User</a></li>
<li><a class="link-item" data-action="role" title="Manage Role">Manage Role</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>

How to hide the image

Here is the JSfiddle http://jsfiddle.net/zfxrxzLg/ Look at this for full code
Why does the last picture collapses underneath, and isn't hidden as it should be? I'm trying to create a slider. I'm thinking that might be the issue why the slider isn't working.
HTML
<div class="gallery-wrap">
<div class="gallery clearfix">
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
CSS
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
width: 432px;
}
.gallery {
position: relative;
left: 0;
top: 0;
}
.gallery__item {
float: left;
list-style: none;
margin-right: 20px;
}
.gallery__img {
display: block;
border: 4px solid #40331b;
height: 80px;
width: 80px; }
.gallery__controls { margin-top: 10px; }
.gallery__controls-prev { cursor: pointer; float: left; }
.gallery__controls-next { cursor: pointer; float: right; }
.clearfix:after{
content: '.';
clear: both;
display:block;
height: 0;
visibility: hidden;
}
JavaScript
$(window).load(function(){
$(".gallery__link").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
var totalWidth = 0;
$(".gallery__item").each(function(){
totalWidth = totalWidth + $(this).outerWidth(true);
});
var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem){
if($targetItem.length){
var newPosition = $targetItem.position().left;
if(newPosition <= maxScrollPosition){
$targetItem.addClass("gallery__item--active");
$targetItem.siblings().removeClass("gallery__item--active");
$(".gallery").animate({
left : - newPosition
});
} else {
$(".gallery").animate({
left : - maxScrollPosition
});
};
};
};
$(".gallery").width(totalWidth);
$(".gallery__item:first").addClass("gallery__item--active");
$(".gallery__controls-prev").click(function(){
var $targetItem = $(".gallery__item--active").prev();
toGalleryItem($targetItem);
});
$(".gallery__controls-next").click(function(){
var $targetItem = $(".gallery__item--active").next();
toGalleryItem($targetItem);
});
});

few corrections and additions:
.gallery__item {
display: inline-block;
list-style: outside none none;
margin-right: 20px;
}
.gallery {
left: 0;
overflow: hidden;
position: relative;
top: 0;
white-space: nowrap;
}

HTML list in circular queue fashion?

I have a scrollable list of items , when last item is scrolled to top i want first item to follow it on the next index along with all remaining items on relative indexes, any idea to implement it using jquery?

You can implement your requirement using one the below example:
Codepen example url
const srart_pos = 90.75;
const item_count = 13;
const s = 0.52 * Math.PI / 180; //Вычислим угол смещения
var pos = [];
var elem = document.getElementsByClassName('item');
function allocationItems() {
var i;
var pp = elem[6].getElementsByTagName('a')[0].getAttribute('data-img');
document.getElementById("pic").style.backgroundImage = "url('"+pp+"')";
document.getElementById("pic").className = "img-box";
pos[0] = srart_pos;
for (i = 1; i < item_count; i++) {
pos[i] = pos[i - 1] - 0.2;
last_pos=pos[i];
}
for (i = 0; i < item_count+1; i++) {
elem[i].style.left = 240 + 250 * Math.sin(pos[i]) + 'px';
elem[i].style.top = 240 + 250 * Math.cos(pos[i]) + 'px';
}
}
allocationItems();
function animation(args, flag) { // некоторые аргументы определим на будущее
var $ = {
radius: 250, // радиус окружности
speed: 10 // скорость/задержка ( в js это мс, например 10 мс = 100 кадров в секунду)
};
var e = elem;
document.getElementById("pic").className = "hide";
function animate(draw, duration, callback) {
var start = performance.now();
requestAnimationFrame(function animate(time) {
// определить, сколько прошло времени с начала анимации
var timePassed = time - start;
console.log(time, start)
// возможно небольшое превышение времени, в этом случае зафиксировать конец
if (timePassed > duration)
timePassed = duration;
// нарисовать состояние анимации в момент timePassed
draw(timePassed);
// если время анимации не закончилось - запланировать ещё кадр
if (timePassed < duration) {
requestAnimationFrame(animate);
} else callback();
});
}
animate(function (timePassed) {
var i;
for (i = 0; i < item_count; i++) {
e[i].style.left = 240 + $.radius * Math.sin(pos[i]) + 'px';
e[i].style.top = 240 + $.radius * Math.cos(pos[i]) + 'px';
if (flag) {
pos[i] += s;
} else {
pos[i] -= s;
}
} /* callback function */
}, 400, function changeItems() {
var list = document.getElementById('list');
var ch = flag ? list.firstElementChild : list.lastElementChild
ch.remove();
if (flag) {
list.appendChild(ch);
} else {
list.insertBefore(ch, list.firstChild);
}
allocationItems();
});
}
$border-color: #a2c0d9;
$background-color: #4682b4;
$font-color: #dae6ef;
$hover-color: white;
body {
background-color: $background-color;
}
a:hover,
a {
color: inherit;
text-decoration: inherit;
}
.c-menu {
position: relative;
height: 440px;
width: 800px;
overflow: hidden;
margin-left: 50px;
margin-top: 50px;
}
%gradient-box {
position: absolute;
left: 0;
width: 100%;
height: 50px;
background: transparent;
}
.top {
#extend %gradient-box;
top: 0;
background: linear-gradient(
to bottom,
rgba(70, 130, 180, 1) 0%,
rgba(70, 130, 180, 0) 100%
);
}
.bottom {
#extend %gradient-box;
bottom: 0;
background: linear-gradient(
to bottom,
rgba(70, 130, 180, 0) 0%,
rgba(70, 130, 180, 1) 100%
);
}
.img-box {
position: absolute;
left: 7px;
top: 177px;
width: 111px;
height: 82px;
opacity: 1;
transition: opacity, 2s;
}
.hide {
#extend .img-box;
opacity: 0;
transition: opacity, .5s;
}
.items-list {
position: absolute;
left: -400px;
top: -101px;
width: 500px;
height: 498px;
border: 2px solid $border-color;
border-radius: 50%;
margin: 70px;
}
.item {
position: absolute;
width: 600px;
padding-left: 25px;
font-size: 18px;
transition: font-size 1s;
text-align: left;
cursor: pointer;
&:nth-child(7) {
font-size: 28px;
margin-top: -4px;
transition: font-size .5s;
}
&:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: $font-color;
border-radius: 50%;
left: 5px;
top: 4px;
}
&:nth-child(7):before{
top: 10px;
//box-shadow: 0 0 0 2px yellow,
// 0 0 0 4px deeppink,
// 0 0 0 6px darkorange,
// 0 0 0 8px #8014ff;
}
a {
color: $font-color;
transition: color 0.5s;
&:hover {
color: $hover-color;
transition: color 0.5s ;
}
}
&:nth-child(2),
&:nth-child(3),
&:nth-child(11),
&:nth-child(12) {
opacity: 0.7;
}
}
.btn {
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
left: 60px;
font-size: 20pt;
color: $font-color;
transform: scale(3, 1);
user-select: none;
&:hover {
color: $hover-color;
transition: color 0.5s;
}
}
.prev {
top: 110px;
}
.next {
bottom: 120px;
}
<div class="container">
<div class="c-menu">
<div id="list" class="items-list">
<div class="item">
<a href="https://sass-scss.ru" data-img="https://eu1.searchpreview.de/preview?s=https://sass-scss.ru&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
Sass: Документация на русском языке
</a>
</div>
<div class="item">
<a href="http://www.color-hex.com/" data-img="https://eu1.searchpreview.de/preview?s=http://www.color-hex.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
Color Hex Color Codes
</a>
</div>
<div class="item">
<a href="https://webref.ru/" data-img="https://eu1.searchpreview.de/preview?s=https://webref.ru&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
WebReference
</a>
</div>
<div class="item">
<a href="https://www.w3schools.com/" data-img="https://eu1.searchpreview.de/preview?s=https://www.w3schools.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
W3Schools Online Web Tutorials
</a>
</div>
<div class="item">
<a href="https://learn.javascript.ru/" data-img="https://eu1.searchpreview.de/preview?s=https://learn.javascript.ru&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
Современный учебник Javascript
</a>
</div>
<div class="item">
<a href="https://caniuse.com" data-img="https://eu1.searchpreview.de/preview?s=https://caniuse.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
Can I use... Support tables for HTML5, CSS3, etc
</a>
</div>
<div class="item">
<a href="https://css-tricks.com/" data-img="https://eu1.searchpreview.de/preview?s=https://css-tricks.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
CSS-Tricks
</a>
</div>
<div class="item">
<a href="https://codepen.io" data-img="https://eu1.searchpreview.de/preview?s=https://codepen.io&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
CodePen
</a>
</div>
<div class="item">
<a href="https://unicode-table.com" data-img="https://eu1.searchpreview.de/preview?s=https://unicode-table.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
Таблица символов Юникода®
</a>
</div>
<div class="item">
<a ref="https://fontawesome.com/" data-img="https://eu1.searchpreview.de/preview?s=https://fontawesome.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
Font Awesome
</a>
</div>
<div class="item">
<a href="https://ru.vuejs.org/index.html" data-img="https://eu1.searchpreview.de/preview?s=https://vuejs.org&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
Vue.js
</a>
</div>
<div class="item">
<a href="http://php.net/manual/ru/intro-whatis.php" data-img="https://eu1.searchpreview.de/preview?s=http://php.net&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
PHP: Что такое PHP? - Manual
</a>
</div>
<div class="item">
<a href="http://www.sql.ru/" data-img="https://eu1.searchpreview.de/preview?s=http://www.sql.ru&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
SQL.ru - все про SQL
</a>
</div>
</div>
<div class="top"></div>
<div class="btn prev" onClick="animation({}, 1);">˄</div>
<div id="pic" class="img-box"></div>
<div class="btn next" onClick="animation({}, 0);">˅</div>
<div class="bottom"></div>
</div>
</div>
It is index to using javascript only, and all the element moves in circler direction.

Problems implenting Hero Carousel Slider

The slider/carousel I'm trying to implent is this: http://www.paulwelsh.info/jquery-plugins/hero-carousel/
I know that I have to add HTML code for it, which I am unable to due to little experience with designing websites (started my course around a month ago). Can you help me with the HTML code I am supposed to add to get this to work? This is my HTML, CSS & Javascript. The HTML is what I THINK it should look like, which is obviously wrong.
HTML
<div class="what here?">
<ul class="and what here?">
anything here?
<li><img src="images/deadmau5/slide1.jpg" ></li>
<li><img src="images/deadmau5/slide2.jpg" ></li>
<li><img src="images/deadmau5/slide3.jpg" ></li>
<li><img src="images/deadmau5/slide4.jpg" ></li>
</ul>
</div>
CSS
.hero {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 48px;
}
.hero-carousel article {
width: 980px;
margin: 0 auto;
height: 480px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero-carousel article .contents {
position: relative;
z-index: 2;
top: 72px;
left: 48px;
list-style: none;
color: #000;
width: 556px;
padding: 20px;
background: rgba(255,255,255,0.8);
-pie-background: rgba(255,255,255,0.8);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: 48px;
right: auto;
}
.hero-carousel-nav li a {
background: #D21034;
color: #fff;
border: none;
outline: none;
display: block;
float: left;
padding: 5px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav li a:hover {
background: #89051C;
}
.hero-carousel-nav li a:active,
.hero-carousel-nav li a:focus {
border: none;
outline: none;
}
Javascript
jQuery.fn.heroCarousel=function(a){a=jQuery.extend({animationSpeed:1000,navigation:true,easing:"",timeout:5000,pause:true,pauseOnNavHover:true,prevText:"Previous",nextText:"Next",css3pieFix:false,currentClass:"current",onLoad:function(){},onStart:function(){},onComplete:function(){}},a);if(jQuery.browser.msie&&parseFloat(jQuery.browser.version)<7){a.animationSpeed=0}return this.each(function(){var k=jQuery(this),b=k.children();currentItem=1;childWidth=b.width();childHeight=b.height();if(b.length>2){b.each(function(m){if(a.itemClass){jQuery(this).addClass(a.itemClass)}});b.filter(":first").addClass(a.currentClass).before(b.filter(":last"));var d=Math.round(childWidth*k.children().length),l="-"+Math.round(childWidth+Math.round(childWidth/2))+"px";k.addClass("hero-carousel-container").css({position:"relative",overflow:"hidden",left:"50%",top:0,"margin-left":l,height:childHeight,width:d});k.before('<ul class="hero-carousel-nav"><li class="prev">'+a.prevText+'</li><li class="next">'+a.nextText+"</li></ul>");var e=k.prev(".hero-carousel-nav"),h;if(a.timeout>0){var j=false;if(a.pause){k.hover(function(){j=true},function(){j=false})}if(a.pauseOnNavHover){e.hover(function(){j=true},function(){j=false})}function c(){if(!j){e.find(".next a").trigger("click")}}h=window.setInterval(c,a.timeout)}e.find("a").data("disabled",false).click(function(p){p.preventDefault();var m=jQuery(this),n=m.parent().hasClass("prev"),o=k.children();if(m.data("disabled")===false){a.onStart(k,e,o.eq(currentItem),a);if(n){f(o.filter(":last"),"previous")}else{f(o.filter(":first"),"next")}m.data("disabled",true);setTimeout(function(){m.data("disabled",false)},a.animationSpeed+200);if(a.timeout>0){window.clearInterval(h);h=window.setInterval(c,a.timeout)}}});function f(m,q){var o=parseFloat(k.position().left),n=parseFloat(k.css("margin-left"));if(q==="previous"){m.before(m.clone().addClass("carousel-clone"));k.prepend(m);var p=Math.round(n-childWidth);var r="+="}else{m.after(m.clone().addClass("carousel-clone"));k.append(m);var p=l;var r="-="}if(a.css3pieFix){g(jQuery(".carousel-clone"))}k.css({left:o,width:Math.round(d+childWidth),"margin-left":p}).animate({left:r+childWidth},a.animationSpeed,a.easing,function(){k.css({left:"50%",width:d,"margin-left":n});jQuery(".carousel-clone").remove();i()})}function g(n){var m=n.attr("_pieId");if(m){n.attr("_pieId",m+"_cloned")}n.find("*[_pieId]").each(function(o,p){var q=$(p).attr("_pieId");$(p).attr("_pieId",q+"_cloned")})}function i(){var m=k.children();m.removeClass(a.currentClass).eq(currentItem).addClass(a.currentClass);a.onComplete(k,k.prev(".hero-carousel-nav"),m.eq(currentItem),a)}if(jQuery.browser.msie){e.find("a").attr("hideFocus","true")}a.onLoad(k,e,k.children().eq(currentItem),a)}})};

Embed these resources from the sample page that you provided:
<link rel="stylesheet" media="all" href="jquery.heroCarousel.css" type="text/css" />
<script type='text/javascript' src='jquery.heroCarousel-1.3.js'></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
Then follow this HTML Structure:
<div class="hero">
<div class="hero-carousel">
<article><img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" >
</article>
</div>​
Then add this javascript code to the end of your site:
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
css3pieFix: true
});});
DEMO: http://jsfiddle.net/dCYB7/1/, http://fiddle.jshell.net/dCYB7/1/show/
EDIT:
The entire slider in one HTML+CSS+Javascript collection:
<style>
#slider { width:100%; overflow:hidden; height:372px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-bg.png); margin-bottom:25px; }
#slider-container { height:352px; width:950px; margin:auto; padding-top:10px; position:relative; }
#slider-inner { width:10000px; height:352px; position:absolute; top:10px; left:-970px; }
.slide { width:938px; height:340px; border:6px solid #000; float:left; margin-right:20px; position:relative; }
#slider-arrow-left { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-left.png); position:absolute; left:-53px; top:120px; z-index:999; } #slider-arrow-left:hover { background-position:0 -124px; }
#slider-arrow-right { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-right.png); position:absolute; right:-53px; top:120px; z-index:999; } #slider-arrow-right:hover { background-position:0 -124px; }
#slider-fade-left { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png); position:absolute; left:-320px; top:0px; z-index:2; }
#slider-fade-left:hover { opacity:0.92; }
#slider-fade-right { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png); position:absolute; right:-320px; top:0px; z-index:2; }
#slider-fade-right:hover { opacity:0.92; }
#slider-black-left { height:372px; width:1000px; position:absolute; top:0px; left:-1300px; background-color:#0c100f; }
#slider-black-right { height:372px; width:1000px; position:absolute; top:0px; right:-1300px; background-color:#0c100f; }
</style>
<div id="slider">
<div id="slider-container">
<div id="slider-inner">
<div class="slide">
<a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://smarturl.it/albumtitlegoeshere"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/neffmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a> </div>
</div>
<span id="slider-arrow-left"></span>
<span id="slider-arrow-right"></span>
<span id="slider-fade-left"></span>
<span id="slider-fade-right"></span>
<div id="slider-black-left"></div>
<div id="slider-black-right"></div>
<div id="hearts">
<span class="heart"></span>
<span class="heart"></span>
<span class="heart"></span>
<span class="heart"></span>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function slideLeft(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = oldOrb - 1; if (newOrb < 1) { newOrb = 4; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '+=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left > -10) { me.css('left', '-3880px'); }
bindAll();
});
}
function slideRight(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
oldOrb = parseInt(oldOrb);
var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '-=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left < -4840) { me.css('left', '-970px'); }
bindAll();
});
}
function slideRight2() {
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '-=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left < -4840) { me.css('left', '-970px'); }
});
}
function slideTo(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = $(this).attr('id'); newOrb = newOrb.substr(5,6);
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
var To;
if (newOrb == 1) { To = -970; } if (newOrb == 2) { To = -1940; } if (newOrb == 3) { To = -2910; } if (newOrb == 4) { To = -3880; }
$('#slider-inner').animate({
left: To
}, 600, 'easeOutQuart', function() {
bindAll();
});
}
function orbChange(orb) {
$('.heart-active', '#hearts').removeClass('heart-active');
$('#heart' + orb + ' span').addClass('heart-active');
}
function bindAll() {
$('#slide-left').bind('click', slideLeft);
$('#slide-right').bind('click', slideRight);
$('#slide-left-fade').bind('click', slideLeft);
$('#slide-right-fade').bind('click', slideRight);
$('#hearts a').bind('click', slideTo);
}
function unbindAll() {
$('#slide-left').unbind('click', slideLeft);
$('#slide-right').unbind('click', slideRight);
$('#slide-left-fade').unbind('click', slideLeft);
$('#slide-right-fade').unbind('click', slideRight);
$('#hearts a').unbind('click', slideTo);
}
var refreshId = setInterval(function() {
slideRight2();
}, 6000);
bindAll();
});
</script>
Live DEMO | CODE

add width and margin 0 auto in .hero class
.hero {
position: relative;
overflow: hidden;
margin-bottom: 48px;
margin: 0 auto;
width: 960px;
}

Why does this jQuery slider work vertically but not horizontally?

I have a slider that has a main image area and small thumbs on the side. When you click on a thumb it loads that image in a larger size in the main image area. There are also next and previous links. If there are more thumbs then there is space for to show then only 13 are shown and the rest hidden. When you click on "next" all the thumbs move up one causing one more to be exposed. When you click "previous" all the thumbs move down one causing one more previous thumb to be exposed. That's how it works with vertical scrolling, and here's the code for it:
HTML:
<div class="gallery">
<div id="gallery_actions">
<div class="gallery_count"><span class="counter">3</span> / 17</div>
<div class="view_slideshow"><label><input class="slideshow_toggle" type="checkbox">Start slideshow</label></div>
</div>
<div class="carousel">
<div class="arrow arrow_previous"></div>
<div class="carousel_region">
<div class="carousel_subregion">
<ul class="carousel_slide">
<li class="thumb" id="carousel_thumb_5626316" data-json="{'id':'5626316'}">
<img src="shark_files/fb1490b2aa8dcf9a64861f9dcab86ca1.jpg" alt="Picture: 1920315" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_4034028" data-json="{'id':'4034028'}">
<img src="shark_files/fa41b5ff4a148ac68e65d1dcfd2c5f6a.jpg" alt="Picture: 1911579" height="30" width="40">
</li>
<li class="thumb selected" id="carousel_thumb_4063804" data-json="{'id':'4063804'}">
<img src="shark_files/b2850e2656bd41efe09f4df2cfadecc3.jpg" alt="Picture: 1914572" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3903274" data-json="{'id':'3903274'}">
<img src="shark_files/d2e254b960b5dbb854b905c67ff68e1b.jpg" alt="Picture: 1901129" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_99834" data-json="{'id':'99834'}">
<img src="shark_files/71389663b3c371be9ad953273a0894c4.jpg" alt="Picture: 1704362" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3119931" data-json="{'id':'3119931'}">
<img src="shark_files/eca402b67c9126340540aa1c62bc83c3.jpg" alt="Picture: 1792796" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3955105" data-json="{'id':'3955105'}">
<img src="shark_files/2244914dee3f7e23ca5a2a1103a29934.jpg" alt="Picture: 1905495" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_6254076" data-json="{'id':'6254076'}">
<img src="shark_files/39fa72602391c40bc3844d07d68e4e57.jpg" alt="Picture: 1942819" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_61197" data-json="{'id':'61197'}">
<img src="shark_files/e194fd0bcb8c652e56321d3850fb6ca0.jpg" alt="Picture: 3685" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_58516" data-json="{'id':'58516'}">
<img src="shark_files/143f53f536ae4b12b82b615f37de2313.jpg" alt="Picture: 16870" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_42148" data-json="{'id':'42148'}">
<img src="shark_files/6fdbf9d94d8c325c0fc2ccbbf0ef10b9.jpg" alt="Picture: 1608493" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_43248" data-json="{'id':'43248'}">
<img src="shark_files/296697046f7d5ade52b9c0c8330894a8.jpg" alt="Picture: 1596140" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_44795" data-json="{'id':'44795'}">
<img src="shark_files/4fcd7df720d497ddfca91e23c812dcc6.jpg" alt="Picture: 148030" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_47611" data-json="{'id':'47611'}">
<img src="shark_files/6a7fd11395364258f7ba78b40756c073.jpg" alt="Picture: 105834" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_56197" data-json="{'id':'56197'}">
<img src="shark_files/53469c1aca114944f1b380cd17dff886.jpg" alt="Picture: 39682" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_6564813" data-json="{'id':'6564813'}">
<img src="shark_files/2d2bc3ff87b089141f2cebc318d7e9c0.jpg" alt="Picture: 1955011" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_42795" data-json="{'id':'42795'}">
<img src="shark_files/1e2f946e9a0b4fd42399569761c0820b.jpg" alt="Picture: 1601015" height="30" width="40">
</li>
</ul>
</div>
</div>
<div class="arrow arrow_next"></div>
</div>
<div id="pic_main"><img style="position: relative; top: 131.5px;" src="shark_files/8d1ff92265c0e162dcc35fb49de19ae6.jpg" alt="Picture: 11896846" height="337" width="450"></div>
<div class="pic_info">
<div class="title">Title goes here</div>
<div id="description" class="description">Description goes here</div>
</div>
</div>
CSS FOR VERTICAL SLIDE:
.gallery {
background: #000;
color: #fff;
padding: 10px;
}
.gallery .gallery_count {
float: right;
font-size: 14px;
font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }
.carousel {
float: right;
width: 125px;
}
.carousel .arrow {
display: block;
height: 20px;
background: url(../sprite_slideshow_controls.png) no-repeat top left;
width: 46px;
height: 30px;
}
.carousel .arrow_previous {
background-position: 0 0;
}
.carousel .arrow_previous:hover {
background-position: 0 -30px;
cursor: pointer;
}
.carousel .arrow_previous:active {
background-position: 0 -60px;
}
.carousel .arrow_next {
background-position: -46px 0;
}
.carousel .arrow_next:hover {
background-position: -46px -30px;
cursor: pointer;
}
.carousel .arrow_next:active {
background-position: -46px -60px;
}
.carousel .carousel_region {
overflow: hidden;
width: 40px;
height: 450px;
}
.carousel .carousel_subregion {
overflow: hidden;
z-index: 1000;
position: relative;
width: 40px;
height: 450px;
}
.carousel ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 500;
}
.carousel ul li {
float: left;
overflow: hidden;
margin: 0 0 5px 0;
opacity: .5;
filter: alpha(opacity = 50);
background: #ccc;
width: 40px;
height: 30px;
}
.carousel ul li:hover {
opacity: .8;
filter: alpha(opacity = 80);
}
.carousel ul li.selected, .carousel ul li.selected:hover {
opacity: 1;
filter: alpha(opacity = 100);
}
.carousel .thumb img {
cursor: pointer;
}
#pic_main {
text-align: center;
background: #000;
border: 1px solid red;
width: 600px;
height: 450px;
}
#pic_main img {
margin: 0 auto;
display: block;
}
#pic_main img.loading {
display: block;
position: relative;
top: 280px;
}
#pic_main img:first {
display: block;
}
JQUERY PLUGIN CODE:
(function($) {
if(typeof($.fn.scrollTo) == 'function') {
$.fn.slideShow = function(options) {
var defaults = {
axis: 'y',
click: function() { },
counter: '.counter',
left: '.arrow_previous',
increment: 1,
mouseover: function() { },
mouseout: function() { },
next: function() { },
previous: function() { },
region: '.carousel_region',
right: '.arrow_next',
selected: '.thumb:first',
selected_class: 'selected',
slideshow_status: false,
slideshow_time: 6,
slideshow_toggle: '.slideshow_toggle',
speed: 400,
subregion: '.carousel_subregion',
thumb: '.thumb'
};
var options = $.extend(defaults, options);
return $(this).each(function() {
var region = $(options.region, $(this));
var subregion = $(options.subregion, $(this));
var left = $(options.left, $(this));
var right = $(options.right, $(this));
var slideshow = $(options.slideshow_toggle);
var timeout;
var dimension;
if(options.axis == 'x') {
dimension = region.find(options.thumb).eq(0).outerWidth();
} else if(options.axis == 'y') {
dimension = region.find(options.thumb).eq(0).outerHeight();
}
var update_counter = function() {
var index = $(region).find(options.thumb).index($(region).find(options.thumb + '.' + options.selected_class));
$(options.counter).text(index + 1);
};
$(this)
.bind('next', function(event) { region.trigger('next'); })
.bind('previous', function(event) { region.trigger('previous'); });
region
.bind('next', function(event) {
event.stopPropagation();
if(!$(options.thumb + ':last', region).hasClass(options.selected_class)) {
var next = region.find(options.thumb).index(region.find('.' + options.selected_class)) + options.increment;
if(next + options.increment > region.find(options.thumb).length) {
next = region.find(options.thumb).length - options.increment;
}
var next_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(next);
if(next_thumb.length == 0) {
next_thumb = region.find(options.thumb + ':last');
}
next_thumb.addClass(options.selected_class);
subregion.scrollTo(next_thumb, (options.speed * options.increment), { axis: options.axis });
update_counter();
return options.next(event);
}
})
.bind('previous', function(event) {
event.stopPropagation();
if(!$(options.thumb + ':first', region).hasClass(options.selected_class)) {
var prev = region.find(options.thumb).index(region.find('.' + options.selected_class)) - options.increment;
if(prev < 0) {
prev = 0;
}
var prev_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(prev);
if(prev_thumb.length == 0) {
prev_thumb = region.find(options.thumb + ':first');
}
prev_thumb.addClass(options.selected_class);
subregion.scrollTo(prev_thumb, (options.speed * options.increment), { axis: options.axis });
update_counter();
return options.previous(event);
}
})
.find(options.thumb)
.bind('click', function(event) {
// Move Selected Class
region.find('.' + options.selected_class).removeClass(options.selected_class);
$(this).addClass(options.selected_class);
// Update Counter
update_counter();
return options.click(event);
})
.bind('mouseover', function(event) {
return options.mouseover(event);
})
.bind('mouseout', function(event) {
return options.mouseout(event);
});
left.click(function() {
return region.trigger('previous');
});
right.click(function() {
return region.trigger('next');
});
slideshow
.attr('checked', options.slideshow_status)
.click(function() {
if($(this).is(':checked')) {
region.trigger('next');
timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
} else {
clearInterval(timeout);
}
});
if(options.selected !== false) {
$(region).find(options.selected).click();
subregion.scrollTo($(options.selected, region).eq(0), options.speed);
}
if(options.slideshow_status) {
timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
}
});
};
}
})(jQuery);
I want to change the behavior a bit and have the images scroll horizontally instead of vertically. I see that one of the plugin options is axis. I changed that value to "x" instead of "y". and changed the css to this:
.gallery {
background: #000;
color: #fff;
padding: 10px;
}
.gallery .gallery_count {
float: right;
font-size: 14px;
font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }
.carousel {
float: right;
width: 125px;
border: 1px solid green;
width: 490px;
}
.carousel .arrow {
display: block;
height: 20px;
background: url(../sprite_slideshow_controls.png) no-repeat top left;
width: 46px;
height: 30px;
}
.carousel .arrow_previous {
background-position: 0 0;
}
.carousel .arrow_previous:hover {
background-position: 0 -30px;
cursor: pointer;
}
.carousel .arrow_previous:active {
background-position: 0 -60px;
}
.carousel .arrow_next {
background-position: -46px 0;
}
.carousel .arrow_next:hover {
background-position: -46px -30px;
cursor: pointer;
}
.carousel .arrow_next:active {
background-position: -46px -60px;
}
.carousel .carousel_region {
overflow: hidden;
width: 490px;
height: 30px;
}
.carousel .carousel_subregion {
overflow: hidden;
z-index: 1000;
position: relative;
width: 490px;
height: 30px;
}
.carousel ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 500;
}
.carousel ul li {
float: left;
overflow: hidden;
margin: 0 0 5px 0;
opacity: .5;
filter: alpha(opacity = 50);
background: #ccc;
width: 40px;
height: 30px;
}
.carousel ul li:hover {
opacity: .8;
filter: alpha(opacity = 80);
}
.carousel ul li.selected, .carousel ul li.selected:hover {
opacity: 1;
filter: alpha(opacity = 100);
}
.carousel .thumb img {
cursor: pointer;
}
#pic_main {
text-align: center;
background: #000;
border: 1px solid red;
width: 600px;
height: 450px;
}
#pic_main img {
margin: 0 auto;
display: block;
}
#pic_main img.loading {
display: block;
position: relative;
top: 280px;
}
#pic_main img:first {
display: block;
}
Otherwise the HTML and rest of the jQuery is exactly the same. It's not working however. When you click "next" the images don't slide left one causing the next in the list to be exposed.
I'm not sure if this is a jQuery or a CSS issue but I spent all day yesterday trying to figure it out with no luck. Can anyone please help?