Gabriel Nazoa Gabriel Nazoa - 1 year ago 74
PHP Question

bxSlider jquery plugin implementation in Wordpress

I am making my first steps coding. I made some courses on internet and now I am making a wordpress theme to continue learning from the practice.

The thing is that I am looking for a plugin to make an Image Slider, I know that is very simple to install a wordpress plugin but I want to try harder and install a jquery plugin.

I found the bxSlider really functional and complete: There is a tutorial in the site and with the help of other wordpress tutorials I think that maybe I will achieve to install it.

In the bxSlider site they say that I have to create this html markup:

<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>

But what can I do in wordpress? assuming that I will create a page with a gallery inside? What I would like to do is to convert that gallery in an slideshow.


Get the advanced custom fields plug in and the advanced custom fields repeater plugin.

Name your repeater field 'slider'. In the repeater field add an image field, give this field the name slider_image and choose the image type as image url.

the code to show it would be

<?php $sliders=get_field("slider");?>
<ul class="bxslider">
    <?php foreach($sliders as $slider):?>
        <?php $slider=$gallery['slider_image']; ?>
            <img src="<?php echo $slider['url'];?>"/>
    <?php endforeach;?>

Make sure you read the documentation for advanced custom fields here

Set where you want your fields to appear. E.g. specific page, every page, every post while making your field you'll find the option.

Save your field and go to the page or post you set the field to appear in. Then you'll be able to add as many images as you want to your slider