有没有办法将 Laravel 与 swiper 滑块合并 [英] Is there a way to incorporate a laravel with a swiper slider

查看:62
本文介绍了有没有办法将 Laravel 与 swiper 滑块合并的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述


我是 laravel 的新手,所以这可能是一个愚蠢的问题,但我正在尝试使用部分来减少代码中的重复,因为我的应用程序上的每个页面都有一个滑动幻灯片.

我首先在slider.blade.php中创建了一个partial:

<div class="swiper-wrapper">@yield('幻灯片图像')

<div class="swiper-pagination swiper-pagination-white"></div><div class="swiper-button-next swiper-button-white"></div><div class="swiper-button-prev swiper-button-white"></div>

然后我将部分合并到 main.blade.php 文件中.

<html lang="zh-cn">@include('partials._head')<身体>@include('partials._pageloader')@include('partials._navbar')@include('partials._slider') <!---- 这里---->@yield('内容')@include('partials._scrolltotop')@include('partials._footer')@include('partials._bottom')</html>

要在主页上添加幻灯片,例如,添加了滑块图像部分.

@extends('main')@section('title', 'Dialhouse Hotel')@section('slide-image', 'div class="swiper-slide" style="<img src="http://dialhousehotel.com/wp-content/uploads/2017/07/1.jpg" alt="project-1" heigth="360px" width="360px">"></div>')@section('内容')@include('partials._contactform')@include('partials._googlemaps')@endsection

但是,问题是图像没有出现在页面上.它输出 <div class="swiper-slide" style="<img src="http://dialhousehotel.com/wp-content/uploads/2017/07/1.jpg" alt="project-1" heigth="360px" width="360px">"></div> 作为字符串.

解决方案

你可以做

@section('幻灯片图片')<div class="swiper-slide" style="<img src="http://dialhousehotel.com/wp-content/uploads/2017/07/1.jpg" alt="project-1" heigth="360px" width="360px">"></div>@endsection


I am new to laravel so this might be a dumb question but I am trying to reduce duplication in my code using partials as each page on my app has a swiper slideshow.

I first created a partial in slider.blade.php:

<div class="swiper-container">
    <div class="swiper-wrapper">
        @yield('slide-image')
    </div>

    <div class="swiper-pagination swiper-pagination-white"></div>

    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
</div>

I then incorporated the partial in the main.blade.php file.

<!DOCTYPE html>
<html lang="en">

@include('partials._head')
<body>

@include('partials._pageloader')
@include('partials._navbar')

@include('partials._slider') <!---- Here  ---->
@yield('content')


@include('partials._scrolltotop')   

@include('partials._footer')

@include('partials._bottom')


</body>

</html>

To add the slide on the homepage, for example, have added the slider image section.

@extends('main')

@section('title', 'Dialhouse Hotel')
@section('slide-image', 'div class="swiper-slide" style="<img src="http://dialhousehotel.com/wp-content/uploads/2017/07/1.jpg" alt="project-1" heigth="360px" width="360px">"></div>')
@section('content')



    @include('partials._contactform')

    @include('partials._googlemaps')

@endsection   

However, The problem is the image does not appear on the page. It outputs <div class="swiper-slide" style="<img src="http://dialhousehotel.com/wp-content/uploads/2017/07/1.jpg" alt="project-1" heigth="360px" width="360px">"></div> as a string.

解决方案

You can do

@section('slide-image')

    <div class="swiper-slide" style="<img src="http://dialhousehotel.com/wp-content/uploads/2017/07/1.jpg" alt="project-1" heigth="360px" width="360px">"></div>

@endsection

这篇关于有没有办法将 Laravel 与 swiper 滑块合并的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆