CODEWITHSUNDEEP
htmlwordpressbootstrap-4
Chuck
Chuck

Reputation: 15

Bootstrap carousel is being overridden by custom css and shows all images

I've tried to get Bootstrap carousel to work but the problem is that the carousel slider shows all images among each other. I can't see there is something wrong with my code, everything seems correct.

I'm working on a wordpress theme and the carousel is for a gallery post format. What I tried is, I put my custom css above the bootstrap css in the head and than carousel works fine but my custom css not working fine anymore, so I had to put my custom css above my bootstrap css again like it should be. I don't know what's wrong.

...
<article id="post-<?php the_ID(); ?>" <?php post_class( 'minimal-format-gallery' ); ?>>
    <header class="entry-header text-center">
        <?php if( minimal_get_attachment() ): 
            $attachments = minimal_get_attachment(3);
        ?> 
            <div id="post-gallery-<?php the_ID(); ?>" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <?php 
                        $i = 0;
                        foreach( $attachments as $attachment ): 
                        $active = ( $i == 0 ? ' active' : '' );
                    ?>
                        <div class="carousel-item<?php echo $active; ?> background-image standard-featured" style="background-image: url( <?php echo wp_get_attachment_url( $attachment->ID ); ?> );"></div>
                    <?php $i++; endforeach; ?>
            </div><!-- .carousel-inner -->
                <a class="carousel-control-prev" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#post-gallery-<?php the_ID(); ?>" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div><!-- .carousel -->
            <?php endif; ?>

Upvotes: 0

Views: 716

Answers (1)

vipul Patel
vipul Patel

Reputation: 79

The problem is in your css file because you have defined a class with the same name as a bootstrap class. You should rename your custom css class or id and make sure it doesn't match with any predefined class or id. I hope after that it will work. If the problem is not resolved, edit your question and leave a comment for me.

Upvotes: 1

Related Questions