轮播结束后,网站向下滚动

时间:2018-10-16 14:56:08

标签: javascript scroll slider carousel

我的网站存在以下问题: 我的网站上有一个轮播滑块,它与图像和描述互换。您可以在http://jellekok.com/new/

上查看它的运行情况

问题: 1.将鼠标悬停在右边的最后一个描述上:“〜éénvisuele identiteit en bewegwijzering” 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>

0 个答案:

没有答案