How to make a loop work for a slider

  • Resolved JakenCD

    (@vansite)


    8 years, 7 months ago

    Hi,

    I’m trying to create a slider that works with the loop in wordpress. I created a post-type so my client can add new slides by creating specific posts (title and image) in the dashboard.

    The html is the following:

    <div class="tab-content">
    <div id="marmol" class="tab-pane fade in active">
        <div class="row">

            <?php $loop = new WP_Query( array( 'post_type' => 'materiales', 'orderby' => 'post_id', 'order' => 'ASC' ) ); ?>
            <div class="col-sm-6">
                <div id="carousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner big-image">
                        <?php while( $loop->have_posts() ) : $loop->the_post(); ?>
                        <div class="item active">
                            <img src="<?php the_post_thumbnail(); ?>">
                            <div class="leyenda">
                                <p><?php the_title(); ?></p>
                            </div>

                        </div>

                    </div><!-- carousel-inner big-image -->

                </div><!-- carousel -->
	   <?php endwhile; ?>			

            </div> <!-- /col-sm-6 -->

            <div class="col-sm-6">
                <p>some text</p>
            </div> <!-- /col-sm-6 -->

        </div> <!-- /row -->

    </div><!-- marmol -->
</div><!-- tab-content -->'

    Obviously this doesn’t work. All the images are loaded instead of just loading the correct one each time

    Then I have a small “thumb carousel” so the user can click the image that is loaded in the slider. But I’ve omitted it for now in order to work just in the slider.

    Any idea how should I call the loop to make the slider work?

    Thanks in advance

Viewing 4 replies - 16 through 19 (of 19 total)

  • What editor are you using? Looks like it may be changing the > to & gt; causing it to literally show as a char.

    Try pasting it into notepad and then putting it into the html.

    Thread Starter JakenCD

    (@vansite)

    I’m using coda. Shouldn’t do that

    I’m working on mac so I’ve tried in text editor. Same problem

    Sorry, i can’t seem to see anything that would be causing that.

    In regards to your thumbnails however, here’s what i do:

    Install Advanced Custom Fields and get hold of the repeater field. (It’s worth the money for that field!).

    Setup a repeater field (used for each carousel item). Inside that, add another repeater field (used for each thumbnail) and inside that an image field (for your thumbnail).

    Then loop through them to build your thumbnails in far less lines of code.

    If you end up needing help, i may have some code laying around i can pass over for you to edit as you need to.

    Thread Starter JakenCD

    (@vansite)

    I will try that. Actually I already had the ACF plugin installed.

    thanks for your help.

    I’m going to put the topic as solved for now because with some work (and thanks to your help) I think i can do it.

    If I can’t I will let you know.

    Thanks a lot man

Viewing 4 replies - 16 through 19 (of 19 total)
  • The topic ‘How to make a loop work for a slider’ is closed to new replies.

Tags