Разработать виджет - слайдер новостей как на МТС

Пример: ПОЛЕЗНЫЕ МАТЕРИАЛЫ

kuban.mts.ru/personal

Т.е выводится N количество материалов, после которых выводится слайд со ссылкой на все материалы. 

Кто может помочь реализовать? Стили при наведении мышкой на слайд аналогично как на примере. Также и уход слайдов в конец экрана, а не по ширине контейнера.

 Def, что такое ПОЛЕЗНЫЕ МАТЕРИАЛЫ? И я что то не вижу в примере по ссылке того, что написано в задании.

Стили при наведении мышкой на слайд аналогично как на примере. Также и уход слайдов в конец экрана, а не по ширине контейнера.

что такое ПОЛЕЗНЫЕ МАТЕРИАЛЫ?

По ссылке, внизу страницы есть раздел такой

Спойлер

По ссылке, внизу страницы есть раздел такой

Ааа, понял) Спасибо.

Кто может помочь реализовать?

Вот ваш слайдер

Вот ещё о его настройках

Сделайте копию родного виджета слайдер, для начала и в шаблоне пропишите код слайдера.

Сделайте копию родного виджета слайдер, для начала и в шаблоне пропишите код слайдера.

он будет визуально также уходить вправую сторону в конец экрана или это не от слайдера зависит?

Нужно стили наверное настраивать, ну и в полноэкранную позицию виджет вывести

ну и в полноэкранную позицию виджет вывести

а где там такая настройка?) Мне же слева надо чтобы было как на МТС фиксация по умолчанию по левому краю сайта, а только при листинге уходит влево

а где там такая настройка?)

Это в виджетах)

Работает на весь экран

Тут можно глянуть

Скачайте файлы скрипта и стилей по ссылкам в примере. Создайте в папке виджета папки для них и поместите туда. Вот простой код для вывода. А дальше стилями править надо, ну и код соответственно в нормальный вид привести)

<?php
$this->addJS('templates/' . $this->name . '/controllers/content/widgets/swiper/js/script.js');
$this->addCSS('templates/' . $this->name . '/controllers/content/widgets/swiper/css/style.css');
?>
 
<div class="swiper-container">
    <div class="swiper-wrapper">
        <?php foreach ($items as $item) { ?>
            <?php
            $image = $item[(!empty($big_image_field) ? $big_image_field : $image_field)];
            ?>
            <div class="swiper-slide">
                <img src="<?php echo html_image_src($image, "content_list", true); ?>" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        <?php } ?>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
 
<?php ob_start(); ?>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 6, // кол-во слайдов на экране
        spaceBetween: 30,
        autoplay: true,
        loop: true,
        lazy: false, // включаем отложенную загрузку изображений
 
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
 
        ,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
 
    });
</script>
<?php $this->addBottom(ob_get_clean()); ?>

А дальше стилями править надо, ну и код соответственно в нормальный вид привести)

а как сделать, чтобы не на всю ширину, а именно по левому краю контейнера было по умолчанию?)

 Def, задайте ширину какую надо и думаю он сам встанет по левому краю.