@ramer_ram
Верстальщик

Как правильно подключить slick slider в gulp проект?

В index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">

<script src="static/js/jquery.js"></script>
    <script src="static/js/libs.min.js"></script>
    <script src="static/js/main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>


В libs.styl

@import '../../../node_modules/slick-carousel/slick/slick.css'


В gulp>tasks>scripts.js

$.gulp.task('libsJS:dev', () => {
    return $.gulp.src(['node_modules/jquery/dist/jquery.min.js',
                       'node_modules/slick-carousel/slick/slick.min.js'])
        .pipe($.gp.concat('libs.min.js'))
        .pipe($.gulp.dest('./build/static/js/'))
        .pipe($.browserSync.reload({
            stream: true
        }));
});


Вот проект https://github.com/ramer88/bislite
  • Вопрос задан
  • 3227 просмотров
Пригласить эксперта
Ответы на вопрос 1
@rusweek
у меня через less.
что очень важно для slick - порядок подключения
@import (less) '../slick/slick.css';
@import (less) '../slick/slick-theme.css';
@import (less) '../css/animate.css';
@import (less) '../css/bootstrap.css';
@import (less) '../../bower_components/fotorama/fotorama.css';


до этого было, что Dmitrijs Balcers (less) '../slick/slick.css' и Dmitrijs Balcers (less) '../slick/slick-theme.css' импортировал в конец и все плыло, но потом почитал документацию и решил переместить в начало. И вот удача

В коде сумбур. Чужое переделываю.
gulp.task('less', function () {
    return gulp.src('src/less/**/*.less')
        .pipe(sourcemaps.init())
        .pipe(less({
            paths: [path.join(__dirname, 'less', 'includes')],

        }))
        .pipe(autoprefixer(['last 15 versions', '>1%', 'ie 8', 'ie 7'], {cascade: true}))
		
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('src/css'))
        .pipe(browserSync.reload({stream: true}));
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
18 апр. 2024, в 21:56
2000 руб./за проект
18 апр. 2024, в 21:00
150 руб./за проект