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/

  • where are you using the class inner-slider? – inarilo Dec 6 '17 at 8:23
  • @inarilo sorry, I forgot to change that too. I updated it to .slider-inner – Feyt Dec 6 '17 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? – Feyt Dec 12 '17 at 7:14
  • adding it to the footer should work – inarilo Dec 12 '17 at 9:33
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.

  • isn't css a jquery functiion? – inarilo Dec 6 '17 at 8:17
  • @inarilo Yes it is. Early mornin - didn't even notice it was JS. My bad. – Kucko Dec 6 '17 at 8:29
  • @Kucko, if I console log listItem[i] I get error : Uncaught ReferenceError: listItem is not defined at <anonymous>:1:13 – Feyt Dec 6 '17 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 '17 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? – Feyt Dec 6 '17 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
    }
}
  • 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 – Feyt Dec 11 '17 at 6:48
  • Also, I used the_ID() instead of $post->ID for the li elements otherwise it doesn't work – Feyt Dec 11 '17 at 7:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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