После завершения карусели сайт прокручивается вниз - PullRequest
Новая
       46

После завершения карусели сайт прокручивается вниз

0 голосов
/ 16 октября 2018

У меня есть следующая проблема с моим сайтом: у меня есть слайдер карусели на моем сайте, он меняет изображение и описание.Вы можете увидеть его в действии по адресу: http://jellekok.com/new/

Проблема: 1. Наведите указатель мыши на последнее описание справа: «~ Een visuele identifiteit en bewegwijzering in één» 2. Подождите, пока оно не перейдет к следующему(верхний / первый) слайд.3. затем сайт автоматически прокручивается, как половина экрана, без особой причины?

Кто-нибудь знает, в чем может быть проблема?

HTML-код: 

<div class="banner">
            <ul class="col-lg-8 col-md-6 order-last m_banner_con padding_fix">
              <li><a href="exchange-party.php" id="mb01" style="display:"><img src="http://jellekok.com/img/inforintelligence_intro_960.png"></a></li>
              <li><a href="visual-poetry-festival.php" id="mb02" style="display:none"><img src="http://jellekok.com/img/posters_folders_row.jpg"></a></li>
              <li><a href="exchange-party.php" id="mb03" style="display:none"><img src="img/index_855tot1734.jpg"></a></li>
              <li><a href="exchange-party.php" id="mb04" style="display:none"><img src="img/index_brouwerij_frankendael.jpg"></a></li>
              <li><a href="exchange-party.php" id="mb05" style="display:none"><img src="http://jellekok.com/img/flyer_bno_img_lab_pioniers_960_v2.jpg"></a></li>
              <li><a href="exchange-party.php" id="mb06" style="display:none"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg"></a></li>
              <li><a href="exchange-party.php" id="mb07" style="display:none"><img src="http://jellekok.com/img/sequence_zero_bespreekruimte_960.jpg"></a></li>
            </ul>
            <ul class="col-lg-4 col-md-5 order-first m_banner_txt padding_fix">
              <li><a href="exchange-party.php" class="mb01">~ Een wereld geinspireerd op een moederbord</a></li>
              <li><a href="visual-poetry-festival.php" class="mb02">~ Posters die licht nodig hebben om te kunnen lezen</a></li>
              <li><a href="exchange-party.php" class="mb03">~ Een boek leesbaar in twee richtingen</a></li>
              <li><a href="exchange-party.php" class="mb04">~ Een website in de stijl van een stripboek</a></li>
              <li><a href="exchange-party.php" class="mb05">~ Letters gevormt door magnetisme</a></li>
              <li><a href="exchange-party.php" class="mb06">~ Een posterserie gemaakt van fysieke objecten</a></li>
              <li><a href="exchange-party.php" class="mb07">~ Een visuele identiteit en bewegwijzering in één</a></li>
            </ul>
          </div>

CSS: 

.banner {
  overflow: hidden;
  width: 100%;
}
.banner ul
{
  list-style-type: none;
}
.banner ul.m_banner_txt
{
  overflow: visible;
  margin-bottom: 5px;
}
ul.m_banner_txt li
{
  //position: absolute;
  width: 200%;
  overflow: visible;
}
.banner img
{
  min-width: 100%;
  //background-size: contain;
}

.banner ul.m_banner_con
{
  float: right;
  //height: 69vh;
  //overflow: hidden;
}

.padding_fix
{
  padding-left: 0px;
  padding-right: 0px;
}
.banner ul.m_banner_txt {
  float: left;
  text-align: left;
}

.banner ul.m_banner_txt > li {
  font-size: 24px;
  line-height: 33px;
}

.banner ul.m_banner_txt > li:last-child { border-bottom: 0px; }

.banner ul.m_banner_txt > li.on {
  background: url(../img/icon_bullet.png) no-repeat 5px center;
  font-weight: bold;
}
.banner ul.m_banner_txt > li.on a {
  color: #000;
}

js: 

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

    <!-- Portfolio slider indexpage -->
    <script src="https://www.jqueryscript.net/demo/Tiny-jQuery-Image-Slider-With-Side-Navigation-myelinSlider/js/jquery.myelinSilder.js"></script>

<script>
$('.banner').myelinSlider({

mode : 'fade',
item : 7,
direction : 'down',

// auto play
auto : true,

// transition speed
speed : 4000

});
</script>
...