Member 12753551 Ответов: 2

Слайдер изображений (из папки, без базы данных) в MVC 4


Смотреть
========
@model IEnumerable<_24X7Hires.Models.Slider>

@{
    ViewBag.Title = "Index";
}

    <title>Basic jQuery Slider - Demo</title>
    <link rel="stylesheet" href="../assets/bjqs.css">
    <link href="~/Content/Style.css" rel="stylesheet" type='text/css'>
    <link href="~/Content/assets/demo.css" rel="stylesheet" />
    <script src="~/Content/assets/js/jquery-1.7.1.min.js"></script>
    <script src="~/Content/assets/js/bjqs-1.3.min.js"></script>

        <div id="container">
            <h2>Slider from Folder</h2>
            <div id="banner-fade">
                <ul class="bjqs">
                    @foreach (var item in Model)
                    {
                        <li>
                            <img src='@Html.DisplayFor(modelItem => item.src)'

                                 title='@Html.DisplayFor(modelItem => item.title)' alt="">
                        </li>

                    }

                </ul>
            </div>

            @*<script class="secret-source" style="display:none;">
                    jQuery(document).ready(function ($) {

                        $('#banner-fade').bjqs({
                            height: 320,
                            width: 620,
                            responsive: true
                        });

                    });
                </script>*@
        </div>
        <script src="~/Content/assets/js/libs/jquery.secret-source.min.js"></script>
        <script>
            jQuery(function ($) {

                $('.secret-source').secretSource({
                    includeTag: false
                });

                $('#banner-fade').bjqs({
                    height: 320,
                    width: 620,
                    responsive: true
                });
            });
        </script>



Контроллер
===================
public class HomeController : Controller
   {
       public ActionResult Index()
       {
           string[] filePaths = Directory.GetFiles(Server.MapPath("~/Content/assets/img/"));
           List<Slider> files = new List<Slider>();
           foreach (string filePath in filePaths)
           {
               string fileName = Path.GetFileName(filePath);
               files.Add(new Slider
               {
                   title = fileName.Split('.')[0].ToString(),
                   src = "../Content/assets/img/" + fileName
               });
           }
           return View(files);
       }


Модель
====================
public class Slider
 {
     public string src { get; set; }
     public string title { get; set; }
 }


Что я уже пробовал:

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

2 Ответов

Рейтинг:
18

David_Wimbley

Если вы используете базовый слайдер jquery, то я думаю, что вам нужно сделать

Добавьте animtype: 'slide' в свой код

$('#banner-fade').bjqs({
                   animtype: 'slide',
                   height: 320,
                   width: 620,
                   responsive: true
               });


Также следует отметить, basic-jquery-slider/index.html at master · jcobb/basic-jquery-slider · GitHub[^] похоже, этот плагин больше не поддерживается, так что вам, вероятно, будет лучше выбрать другой слайдер изображений, который соответствует вашим потребностям. Простой поиск в google покажет много (возможно, тысячи) слайдеров изображений jquery, которые вы можете выбрать, которые легко настраиваются и лучше отвечают вашим потребностям, если этот базовый слайдер jquery этого не делает.


Рейтинг:
1

F-ES Sitecore

Я потратил несколько секунд, чтобы просмотреть документацию для вас (когда у вас есть проблема со сторонним компонентом, просмотр документации всегда является хорошим местом для начала)

Основные демо-версии плагинов jQuery Slider[^]

Похоже, вам нужно указать свойство animtype.

Если вы сделали это, и он все еще не работает, то вам, вероятно, не хватает какого-то css или чего-то еще, снова обратитесь к документам.