joseR - Facultad de Ciencias Sociales

.carousel{ $scrollbarHeight: 4px; $scrollbarColor : #D82B6A; $carouselHeight : 200px; $fadeWidth : 50px; $padding : 8px; $radius : 8px; $bg : white; display: block; font-size: 0; border-radius: $radius; padding: $padding; box-shadow: 0 4px 10px rgba(black, .15); background: $bg; transform: translateZ(0); height: $carouselHeight; -webkit-overflow-scrolling:touch; .touch &{ overflow:auto; } /* for tablets */ &[data-at*='left'] > .wrap{ &::before{ opacity:1; text-indent:-50px; } } &[data-at*='right'] > .wrap{ &::after{ opacity:1; text-indent:-50px; } } // scrollbar &::after{ content: ''; pointer-events:none; position:absolute; z-index: 4; bottom: -4px; left: 0; background: $scrollbarColor; height: $scrollbarHeight; border-radius: $scrollbarHeight; opacity: 0; width: var(--scrollWidth, 0); left: var(--scrollLleft, 0); transition: opacity .2s, bottom .2s; } &:hover{ &::after{ opacity:1; bottom:-10px; } } > .wrap{ overflow:hidden; border-radius: $radius - $padding/2; &::before, &::after{ content: '\2039'; opacity: 0; position: absolute; top: 0; left: 0; bottom: 0; z-index: 2; width: $fadeWidth; font-size: 80px; text-indent:-30px; line-height: $carouselHeight; font-family: monospace; color: #555; font-weight: bold; border-radius: $radius; pointer-events: none; transition: .2s ease-out; background:linear-gradient(to right, white 20%, transparent); } &::after{ transform:rotate(180deg); left: auto; right:0; } > ul{ list-style:none; white-space:nowrap; height:$carouselHeight; > li{ display:inline-block; vertical-align:middle; height:100%; margin:0 0 0 5px; position:relative; overflow:hidden; transition:0.25s ease-out; &:first-child{ margin:0; } > img{ display:block; height:100%; margin:auto; vertical-align:bottom; position:relative; z-index:1; transition:1s ease; } //&:hover img{ transform:scale(1.1); } } } } } body{ background:#EEE; } // demo only .carousel{ position: absolute; top:0; right:0; bottom:0; left:0; width: 50%; max-width: 900px; min-width: 550px; margin: auto; } //VIDEO THUMBS FUNCTIONS// $('.video-thumb:nth-child(1)').clone().appendTo('.video-thumbs').addClass('clone first-clone'); $('.video-thumbs').find('.video-thumb:nth-child(5)').removeClass('active thumb-1').attr('index', '5'); $('.video-thumb:nth-child(4)').clone().prependTo('.video-thumbs'); $('.video-thumbs').find('.video-thumb:nth-child(1)').removeClass('active').addClass('clone last-clone').attr('index', '0'); function nextVideoThumb() { var currentThumb = parseInt($('.video-thumbs').attr('current-thumb')); var totalThumbsInit = $('.video-thumb').length; var totalThumbs = parseInt(totalThumbsInit - 2); var activeClasses = $('.video-thumbs').attr('class'); var splitClasses = activeClasses.split(' '); var thisClass = splitClasses[1]; $('.video-thumb').removeClass('active'); if (currentThumb < totalThumbs) { var nextThumb = parseInt(currentThumb + 1); var nextClass = 'position-' + nextThumb; $('.video-thumbs').attr('current-thumb', nextThumb); $('.video-thumbs').removeClass(thisClass); $('.video-thumbs').addClass(nextClass); $('.video-thumb[index='+nextThumb+']').addClass('active'); } else if (currentThumb == totalThumbs) { var nextThumb = 1; var nextClass = 'position-1'; $('.video-thumbs').attr('current-thumb', nextThumb); $('.video-thumbs').removeClass(thisClass); $('.video-thumbs').addClass(nextClass); $('.video-thumb[index='+nextThumb+']').addClass('active'); } }; function prevVideoThumb() { var currentThumb = parseInt($('.video-thumbs').attr('current-thumb')); var totalThumbsInit = $('.video-thumb').length; var totalThumbs = parseInt(totalThumbsInit - 2); var activeClasses = $('.video-thumbs').attr('class'); var splitClasses = activeClasses.split(' '); var thisClass = splitClasses[1]; if (currentThumb > 1) { var prevThumb = parseInt(currentThumb - 1); var prevClass = 'position-' + prevThumb; $('.video-thumbs').attr('current-thumb', prevThumb); $('.video-thumbs').removeClass(thisClass); $('.video-thumbs').addClass(prevClass); $('.video-thumb[index='+prevThumb+']').addClass('active'); } else if (currentThumb == 1) { var prevThumb = totalThumbs; var prevClass = 'position-' + totalThumbs; $('.video-thumbs').attr('current-thumb', prevThumb); $('.video-thumbs').removeClass(thisClass); $('.video-thumbs').addClass(prevClass); $('.video-thumb[index='+prevThumb+']').addClass('active'); } }; $('.video-thumbs-frame').on('swipeleft', nextVideoThumb); $('.video-thumbs-frame').on('swiperight', prevVideoThumb); //