1

I'm trying to add a slider to Wordpress (Flickity's slider: https://flickity.metafizzy.co) but am unable to figure out how to add it as it doesn't follow the typical external plugin format where I can add a zip folder.

Tried adding code into the text section of a post. Tried setting up a custom css but not too sure I applied it correctly. Don't really know where to begin.

J. Martello
  • 11
  • 2

4 Answers4

1

There are many slider plugins around already, you can use them to get inspiration. Look e.g. at gutenslider that implements a slider block or at older plugins, e.g. slide anything. As all wordpress plugins in the plugin dir must follow a GPL license, you can look at their source code.

That said, you can write your own plugin with flickity. You would have to give users a way to select which images they want to slide and then include the flickty stylesheets and javascript and make php create the needed Document Model for the slider.

niklas
  • 2,887
  • 3
  • 38
  • 70
1

You can create a template and call js and css using the wp_enqueue_script and wp_enqueue_style which is used Flickity's slider.And create html like this

HTML

<div class="main-carousel">
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  ...
</div>

Put jquery code in your template like below

$(document.ready(function()
{

    $('.main-carousel').flickity({
      cellAlign: 'left',
      contain: true
    });
}
Jinesh
  • 1,554
  • 10
  • 15
0

This is because this is not a WordPress plugin. You do not need it to be one either. Place the files you have downloaded somewhere in the theme folder and then use wp_enqueue_script to load the JS files and wp_enqueue_style to load the CSS files.

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

https://developer.wordpress.org/reference/functions/wp_enqueue_style/

TeeJayEss
  • 151
  • 1
  • 12
  • You may also want to consider using one of the *many* WordPress slider plugins if you are newer to WordPress. They do make things very simple. – TeeJayEss Jun 21 '19 at 11:48
0

If you are not using a child-theme, then it is recommended that you do. But here is what you will have to do: you need to edit files - such as header.php, footer.php, styles.css and the file where you would like you slider to go (page.php)

Add this to your header, just above styles.css: 

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

Add this code to your footer.php (I have also included jquery, you may not need to):

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> 

<script>
    $('.main-carousel').flickity({
      cellAlign: 'left',
      contain: true
    });
</script

This goes at the bottom of your styles.css:

  .carousel-cell {
 width: 100%; /*  full width */
  height: 300px;
  background: #222;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel.is-fullscreen .carousel-cell {
  height: 100%;
}

And finally this is what displays your slider (this goes wherever you would like your slider to display - with link to the images you would like to use):

div class="main-carousel">
         <div class="carousel-cell"><img src="https://source.unsplash.com/random/1197x458"></div>
         <div class="carousel-cell"><img src="https://source.unsplash.com/random/1198x457"></div>
         <div class="carousel-cell"><img src="https://source.unsplash.com/random/1199x456"></div>
      </div>

You can see the slider in effect here

Johanne
  • 89
  • 7