Изображение, показываемое дважды в слайдере с несколькими изображениями

Question

Я начал с того, что просто пытался использовать плагин для слайдера многомаговой карусели для сайта. Тем не менее, казалось, что есть какая-то форма проблемы с каждым из них. Поэтому я решил просто поставить простой слайдер. Все работает хорошо, за исключением того, что одно из изображений отображается дважды. Я очень мало знаю о 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>