在幻灯片内移动光滑的导航箭头

Move slick navigation arrows inside the slides

本文关键字：导航 幻灯片 移动      更新时间：2023-09-26

如何移动导航箭头?希望它们在滑块图像上。我已经尝试了我在网上能找到的一切，没有结果。使用ASP。NET并不认为这很重要。使用最新的SLICK版本。

HTML代码: 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Slick.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Slideshow</title>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head> 
<body><div class="slider-for">
    <form id="form1" runat="server">
    <div class="slider">
    <img src="'img'koral.jpg" /> 
    <img src="'img'ships.jpg" />  
        </div>
    </form></div>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>
    <script type="text/javascript" src="slick/Instellingen.js"></script>

</body>
</html>

My JS settings: 

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    swipe: false,
    accessibility: false,
    arrows: false,
});
$(document).ready(function () {
    $('.slider').slick({
        slide: 'img',
        dots: true,
        infinite: true,
        speed: 300,
        arrows: true,
        centerMode: true,
        variableWidth: true,
        autoplay: true,
        autoplaySpeed: 2000,
        appendArrows: $('img'),
        appendDots: $('img')

    });
});

编辑:发现问题是我的缓存不刷新…现在幻灯片下面有一个箭头，我怎么把它移到前面?

尝试使用CSS将导航按钮移动到滑块中。例如:

.slick-prev {
    left: 25px;
    z-index: 1;
}
.slick-next {
    right: 25px;
}
.slick-prev:before, .slick-next:before {
   color: #000;
}
相关文章：