Question

我正在尝试向图片和内容添加滑块。我尝试过使用不同的教程，但它们主要用于图像（不包含内容），如轮播。我在这里需要你的建议，为彼此旁边的图像和内容添加滑块。

index.html的代码

<div class="container slider-border mt-4">
  <i class="fa fa-angle-left" style="font-size:24px"></i>
<div class="row " id="oneImg">
  <div class="col-md-6">
    <img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">     
  </div>
  <div class="col-md-6">
    <h4>John D</h4>
    <h5>Software Developer</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<div class="row" id="secondImg">
  <div class="col-md-6">
    <img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">     
  </div>
  <div class="col-md-6">
    <h4>John D</h4>
    <h5>Software Developer</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <img src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" class="img-fluid" width="400" height="300">     
  </div>
  <div class="col-md-6">
    <h4>John D</h4>
    <h5>Software Developer</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
 </div>
 <i class="fa fa-angle-right" style="font-size:24px"></i>
</div>

Answer 1

试试这个简单的jQuery滑块代码。

＆＃13;

def post(request):

    if request.user.is_authenticated():
        form_post = PostForm(request.POST or None, request.FILES or None)
        if form_post.is_valid():
            instance = form_post.save(commit=False)
            instance.user = request.user

            instance.save()

            return HttpResponseRedirect('/home/')
        else:
            form_post = PostForm()

        context = {
            'form_post': form_post,
        }

        return render(request, 'post/post.html', context)
    else:
        return HttpResponseRedirect("/accounts/signup/")

＆＃13;

$(function(){
    
    var totalSlides = 3;
    var slideNumber = 1;
    setInterval(function(){
        if(slideNumber < totalSlides){
            if($("#slider-4").length > 0){
                $("#slider-4").hide("slide", {
                  "direction" : "left",
                  "duration" : 400
                });
            }
            $("#slider-"+ slideNumber +"").hide("slide", {
                  "direction" : "left",
                  "duration" : 400
                });
            slideNumber++;
            $("#slider-"+ slideNumber +"").show("slide", {
                  "direction" : "right",
                  "duration" : 400
                });
           
        } else {
            $("#slider-3").hide("slide", {
                  "direction" : "left",
                  "duration" : 400
                });
            slideNumber = 0;
            $("#slider-4").show("slide", {
                  "direction" : "right",
                  "duration" : 400
                });
        }
    }, 8000);
    
});

＆＃13;

.slider-wrapper{
overflow-x: hidden;
position: relative;
width: 100%;
height: 500px;
}
.slides{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

#slider-1{
display: block;
}

＆＃13;

希望这有帮助

Answer 2

您可以寻找猫头鹰旋转木马或光滑的旋转木马。它们易于使用，可以完全按照您的要求进行操作。

如何向图片和内容添加滑块？

2 个答案: