Develop Reference

Issue with button on swappable gallery in mobile view

I am trying to add a button on the cards in my swipeable gallery, which is made using the Swiper API. However, when I remove the overlay on the cards to make the button visible, the slider starts to behave erratically and does not work properly. I am new to coding and apologize if this is a simple issue, but I would appreciate any help or suggestions.
To make the button functional, I need to remove the "content: ''" property from the ".gallery-cards" class in the CSS. However, when I do this, the slider starts to glitch in the mobile view. The ".gallery-cards" class is only used in the JS code to make the cards swipeable. I have included the CSS, JS, and HTML code below. Thank you for any assistance.
My JS Code
/*=============== SWIPER JS GALLERY ===============*/
let swiperCards = new Swiper(".gallery-cards", {
loop: true,
loopedSlides: 5,
cssMode: true,
effect: 'fade',
});
let swiperThumbs = new Swiper(".gallery-thumbs", {
loop: true,
loopedSlides: 5,
slidesPerView: 3,
centeredSlides: true,
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
swiperThumbs.controller.control = swiperCards;
My CSS Code
.gallery {
height: 100vh;
display: grid;
align-content: center;
justify-content: center;
}
.gallery__card {
position: relative;
width: 228px;
height: 288px;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.gallery__img,
.gallery__card::after,
.gallery__data {
position: absolute;
}
.gallery__img {
inset: 0;
margin: auto;
transition: transform .3s;
}
.gallery__button {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button:hover {
background-color: #074bb1;
color: white;
transition: .6s;
}
.gallery__button-pink {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button-pink:hover {
background-color: #ff66c4;
color: white;
transition: .6s;
}
.gallery__card::after {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 32%, hsla(0, 0%, 0%, .3) 100%);
top: 0;
z-index: 1;
}
.gallery__data {
bottom: 1.5rem;
left: 1.75rem;
z-index: 10;
}
.gallery__title,
.gallery__subtitle {
color: #fff;
font-weight: 500;
}
.gallery__title {
font-size: 1rem;
}
.gallery__subtitle {
font-size: .75rem;
}
.gallery__overflow {
position: relative;
}
.gallery__thumbnail {
position: relative;
width: 60px;
height: 60px;
border-radius: 1.5rem;
overflow: hidden;
cursor: pointer;
margin-left: auto;
margin-right: auto;
transition: transform .3s;
}
.gallery__thumbnail-img {
position: absolute;
inset: 0;
margin: auto;
}
/* Swiper class */
.gallery-cards,
.gallery-thumbs {
width: 260px;
}
.gallery-cards:hover .gallery__img {
transform: scale(1.1);
}
.gallery .swiper-wrapper {
padding: 2.5rem 0;
}
.gallery-thumbs {
height: 132px;
}
/* Active thumbnail */
.swiper-slide-active .gallery__thumbnail {
transform: translateY(-1.25rem) scale(1.2);
}
/* Rotate thumbnail */
.swiper-slide-next .gallery__thumbnail {
transform: rotate(15deg);
}
.swiper-slide-prev .gallery__thumbnail {
transform: rotate(-15deg);
}
/* Sliding numbers */
.swiper-pagination-fraction {
font-size: .813rem;
letter-spacing: -1px;
font-weight: 500;
color: hsl(30, 16%, 50%);
bottom: 0;
}
/* Arrow buttons */
.swiper-button-next::after,
.swiper-button-prev::after {
content: '';
}
.swiper-button-next,
.swiper-button-prev {
font-size: 1.5rem;
color: hsl(30, 8%, 15%);
top: 5.5rem;
}
.swiper-button-next {
right: -1.5rem;
transform: rotate(15deg);
}
.swiper-button-prev {
left: -1.5rem;
transform: rotate(-15deg);
}
/* Other swiper settings */
.gallery-cards::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
scroll-snap-type: initial;
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
#media screen and (max-width: 320px) {
.swiper-button-next,
.swiper-button-prev {
display: none;
}
}
/* For medium devices */
#media screen and (min-width: 1024px) {
.gallery__card {
width: 290px;
height: 370px;
}
.gallery__thumbnail {
width: 65px;
height: 65px;
}
.gallery-cards,
.gallery-thumbs {
width: 290px;
}
}
My HTML Code
<div class="swiper-slide">
<article class="gallery__card">
<img src="../assets/img/hfsimageslider.png" alt="image gallery" class="gallery__img">
<div class="gallery__data">
<button class="gallery__button">More Info</button>
</div>
</article>
</div>

Photo slider glitches in mobile when button is added

I am using a swiper API to make a swipeable gallery. I am trying to add a button on the slider card however to do so I must remove an overlay on the card and when I do so the slider glitches and goes crazy. I'm a beginner in code so I apologize if it's a silly issue but I'd appreciate some assistance.
The way i make the button functional is by removing the content: '' from the .gallery-cards class. However when I remove it the slider glitches in the mobile view. the .gallery-cards is only present in the codes JS to make the card swipe. I have added the CSS, JS, and HTML below. Thanks for any suggestions or help
/*=============== SWIPER JS GALLERY ===============*/
let swiperCards = new Swiper(".gallery-cards", {
loop: true,
loopedSlides: 5,
cssMode: true,
effect: 'fade',
});
let swiperThumbs = new Swiper(".gallery-thumbs", {
loop: true,
loopedSlides: 5,
slidesPerView: 3,
centeredSlides: true,
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
swiperThumbs.controller.control = swiperCards;
.gallery {
height: 100vh;
display: grid;
align-content: center;
justify-content: center;
}
.gallery__card {
position: relative;
width: 228px;
height: 288px;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.gallery__img,
.gallery__card::after,
.gallery__data {
position: absolute;
}
.gallery__img {
inset: 0;
margin: auto;
transition: transform .3s;
}
.gallery__button {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button:hover {
background-color: #074bb1;
color: white;
transition: .6s;
}
.gallery__button-pink {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button-pink:hover {
background-color: #ff66c4;
color: white;
transition: .6s;
}
.gallery__card::after {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 32%, hsla(0, 0%, 0%, .3) 100%);
top: 0;
z-index: 1;
}
.gallery__data {
bottom: 1.5rem;
left: 1.75rem;
z-index: 10;
}
.gallery__title,
.gallery__subtitle {
color: #fff;
font-weight: 500;
}
.gallery__title {
font-size: 1rem;
}
.gallery__subtitle {
font-size: .75rem;
}
.gallery__overflow {
position: relative;
}
.gallery__thumbnail {
position: relative;
width: 60px;
height: 60px;
border-radius: 1.5rem;
overflow: hidden;
cursor: pointer;
margin-left: auto;
margin-right: auto;
transition: transform .3s;
}
.gallery__thumbnail-img {
position: absolute;
inset: 0;
margin: auto;
}
/* Swiper class */
.gallery-cards,
.gallery-thumbs {
width: 260px;
}
.gallery-cards:hover .gallery__img {
transform: scale(1.1);
}
.gallery .swiper-wrapper {
padding: 2.5rem 0;
}
.gallery-thumbs {
height: 132px;
}
/* Active thumbnail */
.swiper-slide-active .gallery__thumbnail {
transform: translateY(-1.25rem) scale(1.2);
}
/* Rotate thumbnail */
.swiper-slide-next .gallery__thumbnail {
transform: rotate(15deg);
}
.swiper-slide-prev .gallery__thumbnail {
transform: rotate(-15deg);
}
/* Sliding numbers */
.swiper-pagination-fraction {
font-size: .813rem;
letter-spacing: -1px;
font-weight: 500;
color: hsl(30, 16%, 50%);
bottom: 0;
}
/* Arrow buttons */
.swiper-button-next::after,
.swiper-button-prev::after {
content: '';
}
.swiper-button-next,
.swiper-button-prev {
font-size: 1.5rem;
color: hsl(30, 8%, 15%);
top: 5.5rem;
}
.swiper-button-next {
right: -1.5rem;
transform: rotate(15deg);
}
.swiper-button-prev {
left: -1.5rem;
transform: rotate(-15deg);
}
/* Other swiper settings */
.gallery-cards::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
scroll-snap-type: initial;
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
#media screen and (max-width: 320px) {
.swiper-button-next,
.swiper-button-prev {
display: none;
}
}
/* For medium devices */
#media screen and (min-width: 1024px) {
.gallery__card {
width: 290px;
height: 370px;
}
.gallery__thumbnail {
width: 65px;
height: 65px;
}
.gallery-cards,
.gallery-thumbs {
width: 290px;
}
}
<div class="swiper-slide">
<article class="gallery__card">
<img src="../assets/img/hfsimageslider.png" alt="image gallery" class="gallery__img">
<div class="gallery__data">
<button class="gallery__button">More Info</button>
</div>
</article>
</div>

Add/Remove class to get a menu to display

I started programming the mobile version of my nav menu earlier. I had to rework my #serviceNav to get it to work in a mobile setting. When doing this I changed my javascript from this:
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('active');
$('body').css('overflow', 'auto');
e.preventDefault();
});
To this:
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
//$('.infoTitles:before').addClass('opened');
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
The issue that I am having now that I previously didn't with my javascript code is that now my desktop media query version of my #serviceNav is not displaying, however it does display and function in the mobile setting. The trigger for this menu is the menu item called "Solutions". You can see that in a media query over 640px that nothing happens, but 640px or less it applies the fadeDown function.
Does anyone see why this is not working for the larger version media query?
Here is a jsfiddle
Full code:
$('#mobile-button').on('click', function () {
$('#nav-pop').addClass('active');
$('html').addClass('is-navOpen');
});
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>

There is a lot going on here and frankly, it's hard to decipher but I think "Nothing happens" is relative. When inspecting the element in dev console you can see the Javascript styling is being added appropriately. So something is happening, it's simply happening off screen because you've told it to. I think the culprit here, is the >640px positioning of your #serviceNav element is maintained at top: -40vh; That's a lot. When removing this value the button displays as follows:
Note: you will have to change some other things around as this displays it on page load. But you get the idea

Centering an image within a slick slider

I have set my images so that they overflow the div that contains them which is exactly what I want, but I want the images to be centered vertically on all browsers at the moment them just overflow at the bottom. I have tried to use transform to do this with no luck. Any ideas? Sorry but I can't attach the full code as it is too long, so I will just post a small part so that I can add my codepen link. Please go to my codepen demo. https://codepen.io/Reece_Dev/pen/OgZGvJ
<div id="head">
<p>Head</p>
</div>
<div class="carousel">
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/07/stairs_one1200-1-1024x512.png" /></div>
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/07/stairs_two1200-1024x512.png" /></div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

you can give a try at the flex display properties:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.carousel{
display:flex!important;/* overrides previous values or set via js */
align-items:center;/* that's where centering happens and overflows on both sides */
}
https://codepen.io/gc-nomade/pen/MoXZve
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 1,
});
});
html,
body,
p {
padding: 0;
margin: 0;
}
#head {
width: 100%;
background-color: blue;
}
p {
font-size: 40px;
color: white;
}
.carousel {
width: 100vw;
overflow: hidden;
max-width: 1000px;
max-height: 400px;
margin: 0 auto;
display: flex!important;
align-items: center;
}
.carousel div img {
width: 100%;
}
/* Slick Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
#charset 'UTF-8';
/* Slider */
.slick-loading .slick-list {
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
#font-face {
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: .25;
}
.slick-prev:before,
.slick-next:before {
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
}
[dir='rtl'] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before {
content: '←';
}
[dir='rtl'] .slick-prev:before {
content: '→';
}
.slick-next {
right: -25px;
}
[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: '→';
}
[dir='rtl'] .slick-next:before {
content: '←';
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<div id="head">
<p>Head</p>
</div>
<div class="carousel">
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/07/stairs_one1200-1-1024x512.png" /></div>
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/07/stairs_two1200-1024x512.png" /></div>
</div>

How to hide overflow on a carousel slider and set a loop

Here is the fiddle link
Hi !
I have a carousel slider and I want to hide the overflow outside the grey box (see the fiddle) and I would like the first button (the first div inside) to come back when the last one is gone.
I am really note familiar with carousel and if someone have a basic lesson on that topic I would apreciate it. I am familiar with css but it feels like the carousel isn't working the same way. I hope this is not duplicated I didn't find a lot about carousel on stack.
$(document).ready(function(){
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
#background_etape2 {
background-color: #a6a6a6;
width: 100%;
height: 800px;
}
#sondage {
Float: left;
left: 35px;
font-size: 20px;
font-weight: bold;
white-space: nowrap;
position: relative;
top: 100px;
color: black;
}
#liste_categorie_sondage {
margin-left: auto;
margin-right: auto;
height: 200px;
width: 600px;
background-color: #555;
border: 1px solid black;
position: relative;
top: 390px;
}
/*
#nav_sondage {
list-style-type: none;
margin: auto;
padding: 0;
list-style-position:inside;
}
*/
#categorie_sondage {
display: block;
width: 600px;
color: #99b3ff;
padding: 8px 16px;
list-style-position:inside;
display: table-cell;
font-size: 20px;
position: relative;
top: -300px;
left: 250px;
}
#menusondage {
text-decoration: none;
color: black;
width: 600px;
background-color: #808080;
text-align: right;
padding: 8px;
display:table-cell;
border: 2px solid black;
}
#menusondage:hover {
background-color: #555;
color: white;
}
<div id="background_etape2" name="etape2">
<div id="etape2">
<div id="liste_categorie_sondage" class="slider">
<div id="categorie_sondage"> Économie <a id="menusondage" href="economie.php">Listes des sondages</a></div>
<div id="categorie_sondage"> Environnement <a id="menusondage" href="environnement.php">Listes des sondages</a></div>
<div id="categorie_sondage"> Santé <a id="menusondage" href="sante.php">Listes des sondages</a></div>
<div id="categorie_sondage"> Éducation <a id="menusondage" href="education.php">Listes des sondages</a></div>
<div id="categorie_sondage"> Services Sociaux <a id="menusondage" href="sociaux.php">Listes des sondages</a></div>
</div>
</div>
</div>
EDIT : My basic problem was coming from my link to code in the css plug-in.
Like one of the anwser told me, I need absolutely the slick.css file in order to make it work and I can or not add the -theme file. Those css sheet hide the overflow without hidding the arrow.
See those file here :
There is the first one (slick.css)
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
And here is the last one slick-theme.css
#charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
#font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
After this, I still have one probleme : The slider buttons just dont show up.
I tried to hide my CSS code with /* */ and yes, the slider button appear but in a weird way.
This is the picture of what happen

To hide the overflow, add overflow: hidden; to #background_etape2 in CSS.
About the circular permutation you want to achieve, it takes a bit more work to do. I'd suggest to use existing jQuery plugins which offer good solutions. Just Google 'carousel javascript' and you'll find some good and well documented examples free to download and use.
Gaby's proposal seems to be the answer.

You have a couple of issues
The most important is that the link to the slick CSS file is wrong. Use //cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css (and add the -theme file if you want to use the plugin theme)
You use duplicate ids on the slides and the links inside. (on the demo i changed those to classes)
See updated demo
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
#import url('//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css');
#import url('//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css');
#background_etape2 {
background-color: #a6a6a6;
width: 100%;
height: 500px;
}
#liste_categorie_sondage {
margin-left: auto;
margin-right: auto;
height: 200px;
width: 600px;
background-color: #555;
border: 1px solid black;
position: relative;
top: 150px;
}
.categorie_sondage {
display: block;
color: #99b3ff;
padding: 8px 16px;
list-style-position: inside;
display: table-cell;
font-size: 20px;
position: relative;
}
.menusondage {
text-decoration: none;
color: black;
background-color: #808080;
text-align: right;
padding: 8px;
display: table-cell;
border: 2px solid black;
}
.menusondage:hover {
background-color: #555;
color: white;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kenwheeler/slick/851da942/slick/slick.min.js"></script>
<div id="background_etape2" name="etape2">
<div id="liste_categorie_sondage" class="slider">
<div class="categorie_sondage">economie <a class="menusondage" href="economie.php">Listes des sondages</a>
</div>
<div class="categorie_sondage">environment <a class="menusondage" href="environnement.php">Listes des sondages</a>
</div>
<div class="categorie_sondage">health <a class="menusondage" href="sante.php">Listes des sondages</a>
</div>
<div class="categorie_sondage">education <a class="menusondage" href="education.php">Listes des sondages</a>
</div>
<div class="categorie_sondage">social<a class="menusondage" href="sociaux.php">Listes des sondages</a>
</div>
</div>
</div>
(and the updated fiddle: https://jsfiddle.net/gaby/eaotmar3/14/)

Hiding the overflow
It is really simple just add overflow: hidden to the gray box (#liste_categorie_sondage)
#liste_categorie_sondage {
overflow: hidden;
margin-left: auto;
margin-right: auto;
...
}
But that is not the problem, you are actually not implementing the CSS provide with the plugin. More below
Slider
Your CSS is all wrong and missing and if you are already using a plugin you have to include all the assets and fallow the docs.
Here is a JSFiddle how it should be implemented
Other Mistakes
You are using ID's to style your content which is a BIG no and mistake.
ID's must be unique it is specified ind W3 Docs
This attribute assigns a name to an element. This name must be unique in a document.
Also they will give you a CSS specificity headache, because they are second highest (right after inline declaration)
More on CSS specificity here