Добавление слайдера в модуль "Новости"

[vitosbaltos 0]

Уважаемые форумчане! Подскажите, почему при добавлении слайдера owl-slider в модуль новостей (latest_news_default.html) в слайдере отображается только первая новость? Остальные новости остаются под слайдером. В чем может быть причина?

 

{config_load file="$language/lang_$language.conf" section="latest_news"}
<!-- Основные стили -->
<link rel="stylesheet" href="jscript/jquery/plugins/owl-slider/owl-carousel/owl.carousel.css">

<!-- Тема по умолчанию -->
<link rel="stylesheet" href="jscript/jquery/plugins/owl-slider/owl-carousel/owl.theme.css">

<!-- Подключаем jQuery  -->
<script src="jscript/jquery/plugins/owl-slider/assets/js/jquery-1.9.1.min.js"></script>

<!-- Подключаем плагин -->
<script src="jscript/jquery/plugins/owl-slider/owl-carousel/owl.carousel.js"></script>

{literal}
<script>

    $(document).ready(function() {
     
      $("#owl-demo").owlCarousel({
     
          autoPlay: 3000, //Set AutoPlay to 3 seconds
     
          items : 4,
         
     
      });
     
    });

</script>
{/literal}

<h1><a href="{$NEWS_LINK}">{#heading_text#}</a></h1>
<div class="page">
<div class="pageItem">
{foreach name=aussen item=module_data from=$module_content}
<div id="owl-demo">
<ul class="span84 item first">

<div class="itemNews">
<span class="date">{$module_data.NEWS_DATA}</span>
</div>

<div class="itemNews">
<strong><a href="{$module_data.NEWS_LINK_MORE}">{$module_data.NEWS_HEADING}</a></strong>
</div>

<div class="itemNews">
{$module_data.NEWS_CONTENT|vam_truncate:$smarty.const.MAX_DISPLAY_LATEST_NEWS_CONTENT:" ..."}
</div>

<div class="itemNews">
<a href="{$NEWS_LINK}" class="contents">{#other_news#}</a>
</div>

</ul>
</div>
{/foreach}

<div class="clear"></div>
</div>

</div>

[support 447]

Я так думаю, что неправлильно слайдер подключён.

Я ownslider никогда не использовал, но, судя по коду, видимо, должно быть что-то тиипа:

{config_load file="$language/lang_$language.conf" section="latest_news"}
<!-- Основные стили -->
<link rel="stylesheet" href="jscript/jquery/plugins/owl-slider/owl-carousel/owl.carousel.css">

<!-- Тема по умолчанию -->
<link rel="stylesheet" href="jscript/jquery/plugins/owl-slider/owl-carousel/owl.theme.css">

<!-- Подключаем jQuery  -->
<script src="jscript/jquery/plugins/owl-slider/assets/js/jquery-1.9.1.min.js"></script>

<!-- Подключаем плагин -->
<script src="jscript/jquery/plugins/owl-slider/owl-carousel/owl.carousel.js"></script>

{literal}
<script>


    $(document).ready(function() {
     
      $("#owl-demo").owlCarousel({
     
          autoPlay: 3000, //Set AutoPlay to 3 seconds
     
          items : 4,
         
     
      });
     
    });


</script>
{/literal}


<h1><a href="{$NEWS_LINK}">{#heading_text#}</a></h1>
<div class="page">
<div class="pageItem">
<div id="owl-demo">
<ul class="span84 item first">
{foreach name=aussen item=module_data from=$module_content}
<li>

<div class="itemNews">
<span class="date">{$module_data.NEWS_DATA}</span>
</div>

<div class="itemNews">
<strong><a href="{$module_data.NEWS_LINK_MORE}">{$module_data.NEWS_HEADING}</a></strong>
</div>

<div class="itemNews">
{$module_data.NEWS_CONTENT|vam_truncate:$smarty.const.MAX_DISPLAY_LATEST_NEWS_CONTENT:" ..."}
</div>

<div class="itemNews">
<a href="{$NEWS_LINK}" class="contents">{#other_news#}</a>
</div>

</li>
{/foreach}
</ul>
</div>

<div class="clear"></div>
</div>

</div>

 

[vitosbaltos 0]

Спасибо. А какие можно стили прописать для <li>, чтобы новости выстраивались горизонтально, а не вертикально?

[support 447]

Вы смотрите примеры слайдера на сайте разработчика этого слайдера, там ведь наверняка есть подходящие примеры, готовые.

[vitosbaltos 0]

Понятно. Спасибо.

[support 447]

Либо дайте ссылку на магазин с этим слайдером, посмотрю, что там и как выглядит, тогда можно будет сказать, что именно в стили добавить.

Изменено 31 августа, 2015 пользователем VaM