0

I'm trying to show a carousel of slides within a flexbox container. There are two problems:

  1. On the initial load two slides are shown instead of just one. This is corrected when scrolling through the slides. There is a blue border around the slide container.
  2. If I set the slick property outline: none to get rid of the blue border all the slides show in a column. Shown in the JSFiddle. (Don't know how to demonstrate part 1 of this problem because it loads an other HTML file).

Here is my code: HTML

<body>
  <div id="middleContainer">
    <div id= "questionContainer">
    <!-- contains question and set of buttons -->
      <div class = "questions" id = "questionText">
      <!-- load questions here -->
      </div>
    </div>
  </div>  
</body>

CSS

body {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    background-color: #DEA940;
}

#middleContainer {
    width: 40%;
    height: 250px;
    background-color: #DEA940;/*#F3D04D;*/
    flex-direction: column;
    align-content: space-around;
    flex-grow: <property unused>
    flex-shrink: <property unused>
    flex-basis: <property unused>
}

#questionContainer {
    justify-content: center;
    flex-direction:column;
    flex-wrap: wrap;
    margin: 2%;
    background-color: #FFF764;
    border: 1% solid;
    border-radius: 5px;
    border-color: #fff764;
}

JS

$("#questionText").load("questions.html", function () {
    $('.questions').slick({
        outline: none,
        slidesToShow: 1
    });
});
Kerst
  • 85
  • 9
  • Please, provide jsfiddle. – Alex Oct 28 '15 at 14:42
  • 1
    OK. Not used JSFiddle before but I'll give it a go – Kerst Oct 28 '15 at 14:49
  • JSFiddle added to demonstrate second part of the problem – Kerst Oct 28 '15 at 15:03
  • Slick plugin does not have outline property. For first problem try to add overflow hidden to the `.questions`. check [this](http://jsfiddle.net/alireza_safian/u85bt7vf/4//) – Alex Oct 28 '15 at 15:20
  • Oops, I misunderstood this outline [solution](http://stackoverflow.com/questions/32468430/slick-js-remove-blue-highlight-around-image) for the blue box - it applies to slick-slide – Kerst Oct 28 '15 at 15:39
  • Alireza - please could you try posting your link again. It isn't working. – Kerst Oct 28 '15 at 15:40
  • [Jsfiddle](http://jsfiddle.net/alireza_safian/u85bt7vf/4/) – Alex Oct 28 '15 at 15:45

0 Answers0