set related articles to autoplay ?

[Norman]

Is it possible to activate autoplay for the related articles that show up in the bottom of the blog ?

Instead of showing three static images they would show more by switching to the next article after a certain time period.

Like a caroussel in autoplay mode ? Is it possible to modify that ?

[sharmstr]

copy /kleo/page-parts/posts-related.php to your child theme. Then add the data-autoplay attribute to the kleo-carousel-post div

COPY CODE

<div class="kleo-carousel-items kleo-carousel-post" data-min-items="1" data-max-items="6" data-autoplay="true">

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Also, I only tested autoplay, but there are other settings that you might be able to add as well

data-speed
data-scroll-fx

Doc for the carousel is here: http://docs.dev7studios.com/jquery-plugins/caroufredsel

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Norman]

Where exactly should I add it ?

kleo-carousel-post div<?php
$categories = get_the_category($post->ID);

if (!$categories) {
return;
}
?>

<section class=”container-wrap”>
<div class=”container”>
<div class=”related-wrap”>
<?php
$category_ids = array();
foreach($categories as $rcat) { $category_ids[] = $rcat->term_id; }

$args=array(
‘category__in’ => $category_ids,
‘post__not_in’ => array($post->ID),
‘showposts’=> 8,
‘orderby’ => ‘rand’ //random posts
);

query_posts($args);

if ( have_posts() ) : ?>

<div class=”hr-title hr-long”><abbr><?php _e(“Related Articles”, “kleo_framework”);?></abbr></div>

<div class=”kleo-carousel-container dot-carousel”>
<div class=”kleo-carousel-items kleo-carousel-post” data-min-items=”1″ data-max-items=”6″>
<ul class=”kleo-carousel”>

<?php
while ( have_posts() ) : the_post();

get_template_part(‘page-parts/post-content-carousel’);

endwhile;
?>

</div>
<div class=”carousel-arrow”>
<i class=”icon-angle-left”></i>
<i class=”icon-angle-right”></i>
</div>
<div class=”kleo-carousel-post-pager carousel-pager”></div>
</div><!–end carousel-container–>

<?php
endif;

// Reset Query
wp_reset_query();
?>
</div>
</div>
</section>

[sharmstr]

Change the line

COPY CODE

<div class="kleo-carousel-items kleo-carousel-post" data-min-items="1" data-max-items="6">

to this

COPY CODE

<div class="kleo-carousel-items kleo-carousel-post" data-min-items="1" data-max-items="6" data-autoplay="true">

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Norman]

I add the code but it has no effect ( I also deleted my cache )

Attachments:

You must be logged in to view attached files.

[sharmstr]

I tested it before I gave it to you so I know it works.

If you inspect the element (view source), is that attribute there?

Which file did you edit? The one in the parent theme or the child? If in the child, do you have the child theme enabled? Do you put it in the correct location within the child?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Norman]

hey you are right I totally forgot to make a page-parts folder in my child theme !!!!!!

It is moving NOW – that’s great. Only thing that is bothering me is that it displays a text now over the related posts saying: “cleo-carousel-post-div”
see attachment. any idea how to get rid of that without destroying the code ? Thanks so much

Attachments:

You must be logged in to view attached files.

[sharmstr]

See at the top of the code you pasted it say exactly whats being printed on the screen? Delete it out of your code.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Norman]

you are totally awesome ! thanks for the great help ! topic closed ! 😉

[sharmstr]

Anytime. I’m actually glad you asked this because now I’m going to do the same on my site…. so thank you!

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts