javascript - 图像在多图像 slider 中显示两次

Question

我开始尝试仅使用该网站的多法师轮播 slider 插件。然而，他们每个人似乎都存在某种形式的问题。所以我选择自己放一个简单的 slider 。除了其中一张图像显示两次之外，一切都运行良好。我对 Jquery 知之甚少，如果有人能指出阻止图像显示两次的最简单的修复方法，我将不胜感激。奇怪的是，HTML 中的第三个图像(星球大战 xwing)显示了两次。

HTML:

<div class="featured_menu">
    <div id="mixedSlider">
        <div class="MS-content">
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Warhammer 40,000</h2>
                    <img src="<?php echo IMG_PATH;?>/warhammer_40000.jpg" alt="Warhammer 40000">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>
            </div>
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Vallejo</h2>
                    <img src="<?php echo IMG_PATH;?>/vallejo.jpg" alt="vallejo paints">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Star Wars X-Wing</h2>
                    <img src="<?php echo IMG_PATH;?>/star_wars_x_wing.jpg"alt="Star Wars X-wing">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>              
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Star Wars X-Wing</h2>
                    <img src="<?php echo IMG_PATH;?>/star_wars_x_wing.jpg"alt="Star Wars X-wing">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>  
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Pokemon</h2>
                    <img src="<?php echo IMG_PATH;?>/pokemon.jpg" alt="Pokemon Trading Card Game">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>  
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Magic the Gathering</h2>
                    <img src="<?php echo IMG_PATH;?>/magic_the_gathering.jpg" alt="Magic the Gathering">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>  
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Dungeons and Dragons</h2>
                    <img src="<?php echo IMG_PATH;?>/dungeons_and_dragons.jpg" alt="Dungeons and Dragons">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>  
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Creature Caster</h2>
                    <img src="<?php echo IMG_PATH;?>/creature_caster.jpg" alt="Creature Caster">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>                  
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Cosmic Encounter</h2>
                    <img src="<?php echo IMG_PATH;?>/cosmic_encounter.jpg" alt="Cosmic Encounter">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>                  
        </div>
        <div class="MS-controls">
            <button class="MS-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
            <button class="MS-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
        </div>
    </div>
</div>
<script src=<?php echo TEMPLATE_PATH;?>/multislider.min.js></script>    
<script>
    $('#mixedSlider').multislider({
        duration: 750,
        interval: 3000
    });
</script>

Answer 1

从 HTML 代码中删除重复项？

<div class="featured_menu">
    <div id="mixedSlider">
        <div class="MS-content">
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Warhammer 40,000</h2>
                    <img src="<?php echo IMG_PATH;?>/warhammer_40000.jpg" alt="Warhammer 40000">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>
            </div>
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Vallejo</h2>
                    <img src="<?php echo IMG_PATH;?>/vallejo.jpg" alt="vallejo paints">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Star Wars X-Wing</h2>
                    <img src="<?php echo IMG_PATH;?>/star_wars_x_wing.jpg"alt="Star Wars X-wing">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>               
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Pokemon</h2>
                    <img src="<?php echo IMG_PATH;?>/pokemon.jpg" alt="Pokemon Trading Card Game">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>  
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Magic the Gathering</h2>
                    <img src="<?php echo IMG_PATH;?>/magic_the_gathering.jpg" alt="Magic the Gathering">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>  
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Dungeons and Dragons</h2>
                    <img src="<?php echo IMG_PATH;?>/dungeons_and_dragons.jpg" alt="Dungeons and Dragons">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>  
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Creature Caster</h2>
                    <img src="<?php echo IMG_PATH;?>/creature_caster.jpg" alt="Creature Caster">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>                  
            <div class="item">
                <div class="imgTitle">
                    <h2 class="imgTitle">Cosmic Encounter</h2>
                    <img src="<?php echo IMG_PATH;?>/cosmic_encounter.jpg" alt="Cosmic Encounter">
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...</p>
                <a href="#">Read More</a>               
            </div>                  
        </div>
        <div class="MS-controls">
            <button class="MS-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
            <button class="MS-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
        </div>
    </div>
</div>
<script src=<?php echo TEMPLATE_PATH;?>/multislider.min.js></script>    
<script>
    $('#mixedSlider').multislider({
        duration: 750,
        interval: 3000
    });
</script>