WordPress Evolve Theme: Change Images in Slider

1 comment

1. You upload a photo in the media library with the correct dimensions for the slider.
   When you select to edit the image you get the full size version.

   In Firefox I right click on the image and ask to copy “Image Location”, in the Chrome browser “Copy image URL”
   that gives me the url to the image in my clipboard something like

   http://www.####.###/wp-content/uploads/2013/06/image.jpg

   Then you go to the widgets

   You have to add the “T4P Carousel Slider” to the Header1 area. If you don’t The theme automatically loads its own custom widget for advertizing the theme. Once you add the widget you will get a code box that by default has their code in it.

   You are going to replace that code with your own it is not to hard but it is certainly not a drag and drop option.

   Once you drag the Carousel Slider to the Header you will see the code.

   you will see 4 sections that look like this:

   <img src='http://www.####.###/wp-content/themes/evolve/library/media/images/slide/slider_img_01.jpg' alt='' />
   <div class='carousel-caption'>
   <h4>Built-in Bootstrap Elements let you do amazing things with your website</h4>
   

   You replace this part of the code with the url to the image from the library using cntl-v and ad a alt tag if you like
   Before
   http://www.####.###/wp-content/themes/evolve/library/media/images/slide/slider_img_01.jpg‘ alt=” />

   After
   http://wp.fofc.org/wp-content/uploads/2013/06/baby.jpg‘ alt=’Baby’ />

   Next you can add a Caption to be over the top of the image
   Before
   Built-in Bootstrap Elements let you do amazing things with your website

   After
   This is a really cool image

   down at the bottom of the code box you will see additional code.
   This controls how may dots are in the rectangular window for navigation one line for each dot
   So you want to have as many lines as you have images. If you only have 3 images take the line with data-to=’4′ completely out. or you can add another line at the bottom:
   5

   <div id='carousel-nav'>
   <a href='#myCarousel' data-to='1' class='active'>1</a>
   <a href='#myCarousel' data-to='2'>2</a>
   <a href='#myCarousel' data-to='3'>3</a>
   <a href='#myCarousel' data-to='4'>4</a>
   -- add or remove lines above this line
   </div>
   

   This controls the navigation box in the lower center of the slider. However the dot does not seem to move as the slides change automatically. The dot only moves when you click on it.

   If you prefer you can remove the entire div from the code and that will remove the navigation box.

   Hope this helps.

   Log in to Reply