带有 Django、Bootstrap、Javascript 的图像滑块无法正常工作

Question

我正在尝试使用静态滑块 (javascript sn-p) 获取动态数据。从 ListView 我正在获取图像。我敢肯定，模板和 javascript 中的循环是错误构建的。有什么建议吗？

models.py

class Gallery(models.Model):
name = models.CharField(max_length=250)
new_image = models.ImageField(upload_to='gallery_folder')
day_publish = models.DateField()

def save(self, *args, **kwargs):
    super().save(self, *args, **kwargs)
    img = Image.open(self.new_image.path)
    if img.height > 940 or img.width > 788:
        output_size = (820,720)
        img.thumbnail(output_size)
        img.save(self.new_image.path)

def get_absolute_url(self):
    return reverse('detail-slug', kwargs={'pk': self.pk})

def __str__(self):
    return self.name

views.py

def slide_show_view(request, *args, **kwargs):
all_images = Gallery.objects.all()
choosen_image = Gallery.objects.get(**kwargs)

context = {
    'all_images': all_images,
    'choosen_image': choosen_image
}
return render(request, "gallery/gallery_slide.html", context)

urls.py

urlpatterns = [
path('slug/<int:pk>/', views.slide_show_view, name="detail-slug"),  

]

我尝试使用跨度的 if 语句（我不知道是否正确）仍然无法正常工作。 画廊幻灯片.html

       <div class="container">
        <div class="carouselContainer">
        <div class="carouselMainImage">
            <img src="{{ choosen_image.new_image.url }}">
        </div>
        {% for image in all_images %}
            <div class="carouselImgs">
                <img src="{{ image.new_image.url }}">
            </div>
        {% endfor %}
        <span class="prev" id="prev">
            < </span>
        <span class="next" id="next">
                > </span>
        </div>
    </div>    
<script src="{% static 'js/slideshow.js' %}"></script>

slideshow.js

var currentSlide = document.getElementsByClassName('carouselMainImage');
function showSlide(slideIndex) {
  const slides = document.getElementsByClassName('carouselImgs');
  console.log(slides);
  if (slideIndex > slides.length) { currentSlide = 1 }
  if (slideIndex < 1) { currentSlide = slides.length }
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none'
  }
  slides[currentSlide - 1].style.display = 'flex'
}


function nextSlide() {
  showSlide(currentSlide += 1);
}

function previousSlide() {
  showSlide(currentSlide -= 1);
}

window.onload = function () {
  showSlide(currentSlide);
  document.getElementById('prev').addEventListener('click', function () {
    previousSlide();
  })
  document.getElementById('next').addEventListener('click', function () {
    nextSlide();
  })
}

Answer 1

不是最好的解决方案，但正在工作。

var curentImageId = document.querySelector('.choosenid').innerHTML;
var allImagesId = [... document.querySelectorAll('.allid')].map((e) => 
e.innerHTML);
var curentImage = document.getElementsByClassName('curentImage');
curentImage[0].style.display = "none"
var curentIm = document.getElementsByClassName('choosenid');
curentIm[0].style.display = "none";
console.log(curentIm);
var curentIms = document.getElementsByClassName('allid');
for (p = 0; p < curentIms.length; p++) {
  curentIms.item(p).style.display = "none";
}
console.log(curentIms);

for(var u = 0; u < allImagesId.length; u++) {
  if (curentImageId == allImagesId[u]) {
    var currentSlide = u;
  }

}
console.log(currentSlide);

function showSlide(slideIndex) {
  const slides = document.getElementsByClassName('carouselImgs')
  if (slideIndex >= slides.length) { currentSlide = 0 }
  if (slideIndex < 0) { currentSlide = slides.length -1 }
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none'
  }
  slides[currentSlide].style.display = 'flex'
} 


function nextSlide() {
  showSlide(currentSlide += 1);
}

function previousSlide() {
  showSlide(currentSlide -= 1);
}

window.onload = function () {
  showSlide(currentSlide);
  document.getElementById('prev').addEventListener('click', function ()     {
   previousSlide();
  })
  document.getElementById('next').addEventListener('click', function () {
    nextSlide();
  })
}