WARNING: Be careful how many content carousels you place on a single webpage. If you include too many, it will slow down your page's loading time.
If you use the iframe code option, you cannot modify the appearance of the carousel.
Click here for an example of the default carousel.
(Unfortunately, at this time the default iframe code option does not support HTTPS for secure connections, and since the BCCLS staff site uses HTTPS, the embedded iframe cannot be shown here.)
To use this method, you will need to include several scripts and CSS links within the <head> of your page. By default, the source code provided automatically includes a <link> to the following CSS file:
You may wish to not include this <link> on your page, or include it before you link your own stylesheet, as it could override your web site's styles. The main styles for the content carousels are included within the following CSS file, which also appears as a <link> within the source code automatically provided:
In order to replace the default arrow images with your own, you would need to replace each of the jpg images above with the path to your own custom images. For example, if you use the following code (with the images located properly on the BCCLS staff website):
You can modify the style of the author text by updating the CSS code for:
The default code is:
If you change the CSS for the author text, you can change the overall look of the carousel. For example, if you use the following code:
...the carousel will look like this:
However, keep in mind that depending on what styles you apply, this may also impact the styling of the title link text. For example, if you were to change the font-style of .river-item to italic, it would also impact the title link text. To prevent the title link text from being italic, you would need to specifically style the title link text to NOT be italic.
For example, in order to make the author text italic, but keep the title link text not italic, you could use the following code:
By default, when you click on the next arrow, the carousel will scroll through 5 titles - basically, it will replace the books currently shown with a new set. However, you can change how many books the carousel scrolls through when you click on the next arrow. To change this, you will need to modify the code that appears within the <body>.
By default, the following line of code is included:
...the carousel will scroll through 3 titles per click:
This change is particularly important if you decide to change the width of the carousel, as described next. If you change the width of the carousel so that only 3 titles are displayed, for example, you will need to change the number of scroll to 3 or less or some titles will not be displayed within the carousel at all.
By default, 5 titles are displayed within the content carousel. You can change how many titles are displayed by modifying the CSS for the carousel and modifying the carousel scroll as described above.
To retrieve the needed code, please select how many titles you would like displayed: