0

I've been trying to create my own slider for my blog posts recently but I cannot get it to work. I have tried different code online but none of them rotate my list items(These are created by the post loop). Below is code I tried from W3Schools but it shows an error Uncaught TypeError: Cannot read property 'style' of undefined at carousel

Here is my function from functions.php which I call on index.php to display the posts:

function displayBlogSlider() {

$args = array(

    'posts_per_page' => 3
);
// the query
$the_query = new WP_Query( $args );

?>

<?php if ( $the_query->have_posts() ) : ?>

    <div class="slider js--slider">

        <!-- pagination here -->

        <ul class="slider-inner js--slider-inner">
        <!-- the loop -->

            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <li class="slider-item js--slider-item">
                    <div class="slider-info">    

                            <?php blog_set_featured_background(); ?>
                            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                            <p>By <a href="<?php the_author(); ?>"><?php the_author(); ?></a></p>
                            <p><?php the_date(); ?> &mdash; <a href="#"><?php comments_number(); ?></a> &#9679; <a href="#"><?php the_category(); ?></a></p>

                    </div>
               </li>
            <?php endwhile; ?>


        </ul>

        <!-- end of the loop -->
            <div class="slider-nav">
                <a href="#" class="nav-prev js--nav-prev">&lt;</a>
                <a href="#" class="nav-next js--nav-next">&gt;</a>
            </div>

    </div>

    <!-- pagination here -->

    <?php wp_reset_postdata(); ?>

<?php else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif;
}

function blog_set_featured_background() {
    $image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full, false );
    if ($image_url[0]) {
    ?>
        <style>

        .slider-inner {
            height:100%;
            margin:0!important;
        }
        .slider-inner {
            background: linear-gradient( rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.80)), url(<?php echo $image_url[0]; ?>) #000 no-repeat;
            background-position: center;
            background-size: cover;

        }
        </style>
 <?php
 }
}

And here is my javascript for making the list items rotate(similar to W3S):

var myIndex = 0;
carousel();
function carousel() {
    var i;
    var listItem = document.getElementsByClassName("js--slider-item");

    for(i = 0; i < listItem.length; i++) {
        listItem[i].style.display = "none";
    }

    myIndex++;

    if(myIndex > listItem.length) {
        myIndex = 1;
    }

    listItem[myIndex-1].style.display = "block";
    setTimeout(carousel, 3000);
}

If there is a better way of making a carousel for wordpress blog posts, I'll accept all advice and info. But I want to create it myself, I don't want to make use of a plugin. Also, I'd prefer pure javascript since I am still learning it.

I want to create something similar to the first slider here - https://manohara.incredibbble.com/

4
  • where are you using the class inner-slider?
    – inarilo
    Dec 6, 2017 at 8:23
  • @inarilo sorry, I forgot to change that too. I updated it to .slider-inner
    – anielfeyt
    Dec 6, 2017 at 11:02
  • @inarilo I found that if I add the javascript directly in the index.php right under the function call for the list of posts, it works! So how do I get the javascript to be read after the function without having to code it directly in the index.php but rather link it via functions.php?
    – anielfeyt
    Dec 12, 2017 at 7:14
  • adding it to the footer should work
    – inarilo
    Dec 12, 2017 at 9:33

2 Answers 2

0

What happens if you use .css("display","none") instead of .style.display = "none"?

So that it looks like this:

var myIndex = 0;
carousel();
function carousel() {
var i;
var listItem = document.getElementsByClassName("js--slider-item");

for(i = 0; i < listItem.length; i++) {
    listItem[i].css("display", "none");
}

myIndex++;

if(myIndex > listItem.length) {
    myIndex = 1;
}

listItem[myIndex-1].css("display", "block");
setTimeout(carousel, 3000);

}

And what do you get, if you console.log() you're listItem[i]?

EDIT:

My bad, .css() is, of course, jQuery.

7
  • isn't css a jquery functiion?
    – inarilo
    Dec 6, 2017 at 8:17
  • @inarilo Yes it is. Early mornin - didn't even notice it was JS. My bad.
    – Kucko
    Dec 6, 2017 at 8:29
  • @Kucko, if I console log listItem[i] I get error : Uncaught ReferenceError: listItem is not defined at <anonymous>:1:13
    – anielfeyt
    Dec 6, 2017 at 11:04
  • Okay - listItem is undefined then. Do you get anything if you console.log listItem variable like this: var listItem = document.getElementsByClassName("js--slider-item"); console.log('List Item = ' + listItem);
    – Kucko
    Dec 6, 2017 at 12:11
  • @Kucko I get the same error. I don't know why it is undefined. Even if I set the javascript to be in the footer to read after everything it still doesn't work. I can upload the theme files to github if that would help?
    – anielfeyt
    Dec 6, 2017 at 13:13
0

The slider is probably working but only showing the last image because you are repeatedly defining (and thus overwriting) the same class slider-inner. In addition, you are assigning the class, and thus the image, to the list, instead of each list item. Instead define the classes once (ideally in a css file) and use an id to identify each slide:

CSS:

.slider-inner {
    height:100%;
    margin:0!important;
}
.slider-item {
    background-position: center;
    background-size: cover;
}

For each list item:

<li id="slider-item-<?php echo $post->ID; ?>" class="slider-item js--slider-item">...</li>

To add images:

function blog_set_featured_background() {
    $image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full, false );
    if ($image_url[0]) {
    ?>
        <style>

        #slider-item-<?php echo $post->ID; ?> {
            background: linear-gradient( rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.80)), url(<?php echo $image_url[0]; ?>) #000 no-repeat;
        }

        </style>
    <?php
    }
}
2
  • this makes sense. I will update it to assign the background image to the li element. But the biggest problem is still there - the posts don't rotate. I see the same text. Please see the code at link
    – anielfeyt
    Dec 11, 2017 at 6:48
  • Also, I used the_ID() instead of $post->ID for the li elements otherwise it doesn't work
    – anielfeyt
    Dec 11, 2017 at 7:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.