Horizontal scroll to, with wordpress acf

1 Views

I am searching for a way of scrolling horizontally to my column of content.
On the click of a column, i’d like it to move to the left.
I made a picture to explain better.

The thing is : i am working with ACF flexible content, and I haven’t found a way of combining this with some javascript library like Sly don’t work. Because this one is working with ul list…

Read More

How to implement this “scroll to” effect ? 

.article-atelier {
  width: 300px;
  height: 85vh;
  float: left;
  padding: 0px;
  margin: 0px;
  display: block;
  padding: 40px;
  padding-bottom: 400px;
  background-color: red;
  overflow-x: scroll;
  overflow-y: none;
}
.article-atelier:hover {
  background-color: gray
}
#ateliers-hori {
  width: 7000px;
  overflow-x: scroll;
  font-size: 20px;
  overflow-y: hidden;
  height: 85vh;
}
.titrage {
  background-color: gray;
  width: 300px;
  height: 80vh;
  font-size: 20px;
  float: left;
}
.titrage2 {
  font-size: 20px;
  text-align: center
}
<?php define( 'WP_USE_THEMES', false); require( './wp-load.php'); ?>

<?php /* Template Name: ateliers */ ?>


<?php get_header(); ?>



<div id="content">


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


  <div id="ateliers-hori">

    <div class="titrage">
      <h4 class="titrage2"><?php the_field('titre_1'); ?></h4>
    </div>

    <?php // check if the flexible content field has rows of data if( have_rows( 'ateliers') ): ?>

    <?php while ( have_rows( 'ateliers') ) : the_row(); ?>


    <?php if( get_row_layout()=='atelieratelier' ):?>

    <div class="article-atelier">
      <h4 class="titrage2"><?php the_sub_field('atelier_01');?></h3>
						        	<?php the_sub_field('texte_atelier');?>
						        	</div>


						       <?php  endif;?>




						    <?php  endwhile;?>

						 <?php else :?>

						    // no layouts found

						<?php endif;

						?>




	<div class="titrage"><?php the_field('titre_2'); ?></div>




	<?php

	// check if the flexible content field has rows of data
	if( have_rows('ateliers') ):?>

	   <?php while ( have_rows('remise_a_niveau') ) : the_row();?>

	       <?php if( get_row_layout() == 'remiseaniveau' ):?>

	      


	       	<div class="article-atelier">
	          <h4 class="titrage2"> <?php the_sub_field('titre_remise');?></h4>
      <?php the_sub_field( 'texte_remise');?>
    </div>

    <?php endif;?>

    <?php endwhile;?>

    <?php else :?>// no layouts found

    <?php endif; ?>



    <?php endwhile; ?>

  </div>


  <?php include (TEMPLATEPATH . "/searchform.php"); ?>
  <?php endif; ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

</div>
<!-- fermeture div "page" -->
</body>

</html>
Post Views: 1

Related posts

1 comment

  1. This looks like a front-end development task, so no need to show us the PHP.

    Have you tried using jQuery? Here is a quick example of something according to your image:

    $('.article').on('click', function () {

    $('html, body').animate({

        scrollLeft: $(this).offset().left + 'px'

    }, 1000);
    
    $('.article').removeClass('select');
    
    $(this).addClass('select');

});
    body {
    width: 1100px;
}
.article {
    width: 100px;
    height: 200px;
    display: inline-block;
    background-color: red;
    cursor: pointer;
}
.article:hover, .article.select {
    background-color: grey;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>

    Press ‘Run Code Snippet’ above or have a look at the fiddle here.

Comments are closed.