如何修复幻灯片？

huangapple
go评论104阅读模式
英文:

How to fix slideshow?

问题

我试图在我的index.html上创建一个卡片幻灯片（轮播）。我目前的代码将五张卡片垂直堆叠在一起，带有可点击的箭头，但箭头没有任何功能。有人知道如何使一次只显示一张卡片，并可以点击切换到下一张吗？

  1. <div id="carouselExample" class="carousel slide">
  2.     <div class="carousel-inner">
  3.         <div class="card active" style="width: 12rem;">
  4.             <img src="https://static.americasbestracing.net/s3fs-public/styles/large/public/reylu-gutierrez.jpg?KHONSa1SS2GQbZtqmIed8QZzxaE.XX.4&itok=AKl_nQxN" class="card-img-top" alt="...">
  5.             <div class="card-body">
  6.                 <p class="card-text">Reylu Gutierrez.</p>
  7.             </div>
  8.         </div>
  10.         <div class="card" style="width: 12rem;">
  11.             <img src="https://www.nyra.com/uploads/profile-images/eric-cancel.jpg" class="card-img-top" alt="...">
  12.             <div class="card-body">
  13.                 <p class="card-text">Eric Cancel.</p>
  14.             </div>
  15.         </div>
  17.         <div class="card" style="width: 12rem;">
  18.             <img src="https://www.nyra.com/uploads/profile-images/manuel-franco.jpg" class="card-img-top" alt="...">
  19.             <div class="card-body">
  20.                 <p class="card-text">Manuel Franco.</p>
  21.             </div>
  22.         </div>
  24.         <div class="card" style="width: 12rem;">
  25.             <img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
  26.             <div class="card-body">
  27.                 <p class="card-text">Joel Rosario.</p>
  28.             </div>
  29.         </div>
  31.         <div class="card" style="width: 12rem;">
  32.             <img src="https://live.staticflickr.com/65535/43429236045_546119af43_b.jpg" class="card-img-top" alt="...">
  33.             <div class="card-body">
  34.                 <p class="card-text">Andre Worrie.</p>
  35.             </div>
  36.         </div>
  37.     </div>
  38.     <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
  39.         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  40.         <span class="visually-hidden">Previous</span>
  41.     </button>
  42.     <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
  43.         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  44.         <span class="visually-hidden">Next</span>
  45.     </button>
  46. </div>

我有CSS和JS源文件。我的JS文件包含以下行：

  1. const myCarouselElement = document.querySelector('#myCarousel')
  3. const carousel = new bootstrap.Carousel(myCarouselElement, {
  4.   interval: 2000,
  5.   touch: false
  6. })

控制台日志中显示"bootstrap未定义"是在const carousel那一行吗？如果是这样，可能是因为你没有正确引入Bootstrap库。确保你在HTML文档中引入了Bootstrap的CSS和JS文件。你可以像这样引入它们：

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  2. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

请注意，你需要使用适用于你的项目的Bootstrap版本，上述示例使用的是Bootstrap 4.5.2的CDN链接。确保链接正确，以便Bootstrap库被正确加载。

英文:

I'm trying to have a slideshow (carousel) of cards on my index.html.
The code I currently have presents all five cards vertically stacked, with clickable arrows that don't do anything. Anyone know how to make it so one card is shown at a time and can be clicked on to the next?

  1. &lt;div id=&quot;carouselExample&quot; class=&quot;carousel slide&quot;&gt;
  2. &lt;div class=&quot;carousel-inner&quot;&gt;
  3. &lt;div class=&quot;card active&quot; style=&quot;width: 12rem;&quot;&gt;
  4. &lt;img src=&quot;https://static.americasbestracing.net/s3fs-public/styles/large/public/reylu-gutierrez.jpg?KHONSa1SS2GQbZtqmIed8QZzxaE.XX.4&amp;itok=AKl_nQxN&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
  5. &lt;div class=&quot;card-body&quot;&gt;
  6. &lt;p class=&quot;card-text&quot;&gt;Reylu Gutierrez.&lt;/p&gt;
  7. &lt;/div&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&quot;card&quot; style=&quot;width: 12rem;&quot;&gt;
  10. &lt;img src=&quot;https://www.nyra.com/uploads/profile-images/eric-cancel.jpg&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
  11. &lt;div class=&quot;card-body&quot;&gt;
  12. &lt;p class=&quot;card-text&quot;&gt;Eric Cancel.&lt;/p&gt;
  13. &lt;/div&gt;
  14. &lt;/div&gt;
  15. &lt;div class=&quot;card&quot; style=&quot;width: 12rem;&quot;&gt;
  16. &lt;img src=&quot;https://www.nyra.com/uploads/profile-images/manuel-franco.jpg&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
  17. &lt;div class=&quot;card-body&quot;&gt;
  18. &lt;p class=&quot;card-text&quot;&gt;Manuel Franco.&lt;/p&gt;
  19. &lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;div class=&quot;card&quot; style=&quot;width: 12rem;&quot;&gt;
  22. &lt;img src=&quot;https://www.nyra.com/uploads/profile-images/joel-rosario.jpg&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
  23. &lt;div class=&quot;card-body&quot;&gt;
  24. &lt;p class=&quot;card-text&quot;&gt;Joel Rosario.&lt;/p&gt;
  25. &lt;/div&gt;
  26. &lt;/div&gt;
  27. &lt;div class=&quot;card&quot; style=&quot;width: 12rem;&quot;&gt;
  28. &lt;img src=&quot;https://live.staticflickr.com/65535/43429236045_546119af43_b.jpg&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
  29. &lt;div class=&quot;card-body&quot;&gt;
  30. &lt;p class=&quot;card-text&quot;&gt;Andre Worrie.&lt;/p&gt;
  31. &lt;/div&gt;
  32. &lt;/div&gt;
  33. &lt;/div&gt;
  34. &lt;button class=&quot;carousel-control-prev&quot; type=&quot;button&quot; data-bs-target=&quot;#carouselExample&quot; data-bs-slide=&quot;prev&quot;&gt;
  35. &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
  36. &lt;span class=&quot;visually-hidden&quot;&gt;Previous&lt;/span&gt;
  37. &lt;/button&gt;
  38. &lt;button class=&quot;carousel-control-next&quot; type=&quot;button&quot; data-bs-target=&quot;#carouselExample&quot; data-bs-slide=&quot;next&quot;&gt;
  39. &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
  40. &lt;span class=&quot;visually-hidden&quot;&gt;Next&lt;/span&gt;
  41. &lt;/button&gt;
  42. &lt;/div&gt;

I have the CSS and JS sources. My js file has these lines

  1. const myCarouselElement = document.querySelector(&#39;#myCarousel&#39;)
  2. const carousel = new bootstrap.Carousel(myCarouselElement, {
  3. interval: 2000,
  4. touch: false
  5. })

Console log says bootstrap is not defined in the const carousel line?

答案1

得分: 1

  1. 好的，在Bootstrap中，您必须遵循提供的模板，请参阅此链接：https://getbootstrap.com/docs/5.2/components/carousel/
  3. 您忘记了添加 class="carousel-item"，所以应该像这样：
  5. <div class="card carousel-item " style="width: 12rem;">
  6.     <img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
  7.     <div class="card-body">
  8.         <p class="card-text">Joel Rosario。</p>
  9.     </div>
  10. </div>
英文:

okay in bootstrap you must follow template provide ,see this https://getbootstrap.com/docs/5.2/components/carousel/

you forget take class= "carousel-item"

so like this

  1. &lt;div class=&quot;card carousel-item &quot; style=&quot;width: 12rem;&quot;&gt;
  2. &lt;img src=&quot;https://www.nyra.com/uploads/profile-images/joel-rosario.jpg&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
  3. &lt;div class=&quot;card-body&quot;&gt;
  4. &lt;p class=&quot;card-text&quot;&gt;Joel Rosario.&lt;/p&gt;
  5. &lt;/div&gt;
  6. &lt;/div&gt;

huangapple
  • 本文由 发表于 2023年2月20日 00:50:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/75501771.html
  • bootstrap-5
  • card
  • carousel
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定