CODEWITHSUNDEEP
javascriptjqueryhtmlcsscarousel
P-A Viel
P-A Viel

Reputation: 17

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

Upvotes: 1

Views: 12847

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

You have a couple of issues

  1. 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)
  2. 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/)

Upvotes: 0

Maverick
Maverick

Reputation: 886

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

Upvotes: 0

Javier Rey
Javier Rey

Reputation: 1620

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.

Upvotes: 1

Related Questions