I recently made the switch from using a camera.js slider on my website to a Flexslider. The reason for this change was that I couldn't make the camera.js slider clickable, and I wanted to eliminate the 'Click here' button. However, now that I have integrated the Flexslider into my site, I am facing challenges in getting back two banners that used to be displayed next to the camera.js slider.
Upon visiting my homepage, you can observe that the banners are not appearing on the right side of the slider as intended but are positioned incorrectly:
https://i.sstatic.net/yESl9.jpg
My goal is to have two banners sized 381 x 219 displayed on the right of the slider, stacked one above the other.
Below is the code snippet:
<div class="container">
<div class="row">
<div class="span12">
<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="25"}}
</script>
<ul class="banner-block-right">
<li><a href="{{store url='nieuwe-producten'}}"> <img src="{{skin url='images/media/banners-8.png'}}" alt="" /> </a></li>
<li><a href="{{store url='klantenservice'}}"> <img src="{{skin url='images/media/banners-7.png'}}" alt="" /> </a></li>
</ul>
</div>
</div>
</div>
To provide some context:
- The code snippet: script type="text/javascript">// etc was utilized due to issues with the navigation bar after integrating the new slider.
Additionally, I placed the slider within a widget for ease of use.
Therefore, my question surrounds the necessary adjustments in the code to ensure the two small banners appear alongside the Flexslider.
On a side note, when I implemented the script to fix my navigation bar, it caused the default Magento pricing layout to reappear. It seemed like a trade-off between functionality of the navigation bar and correct layout of Magento pricing. Any suggestions for resolving this conflict would be appreciated. Thank you!
EDIT: Showing the CSS code for the Flexslider
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {max-width: 700px; margin: -20; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
display: block;
max-width: 100%; height: auto; margin: - auto;
}