Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >小滑块怎么去掉滑块号?

小滑块怎么去掉滑块号?
EN

Stack Overflow用户
提问于 2022-08-25 10:50:40
回答 1查看 103关注 0票数 0

我想知道是否有一个属性可以用来访问幻灯片编号。我需要它来实现我想要包含的功能,但我不希望它显示在网页上。

我在图书馆里搜索,看看是否有一个明显的属性,我可以使用,但要么我没有看到它,或者它不在那里。这很有趣,因为在我看过的视频中,这个人根本没有显示他们的幻灯片号,尽管我在实例化tns对象时使用了几乎相同的属性。

这是我的滑块,你可以看到图片上方的滑块号。这就是我希望摆脱的东西。

澄清一下,我使用的是Svelte框架。

代码

代码语言:javascript
运行
AI代码解释
复制
<script>
  import { onMount } from "svelte";
  import {tns} from "tiny-slider/src/tiny-slider.js";

  let slider

  onMount(()=>{
    slider = tns({
      container: ".my-slider",
      slideBy: 1,
      speed: 1000,
      nav: false,
      controls: false,
      autoplay: true,
      autoplayButtonOutput: false,
      responsive: {
        1024: {
          items: 4,
        }
      },
    })
  })

  const images = [
    {uid: 'image1', src: '/images/cat1.jpg'},
    {uid: 'image2', src: '/images/cat2.jpg'},
    {uid: 'image3', src: '/images/cat3.jpg'},
    {uid: 'image4', src: '/images/cat4.jpg'},
 
    {uid: 'image5', src: '/images/cat5.jpg'},
    {uid: 'image6', src: '/images/cat6.jpg'},
    {uid: 'image7', src: '/images/cat7.jpg'},
    {uid: 'image8', src: '/images/cat8.jpg'},
     
    {uid: 'image9', src: '/images/cat9.jpg'},
    {uid: 'image10', src: '/images/cat10.jpg'},
    {uid: 'image11', src: '/images/cat11.jpg'},
    {uid: 'image12', src: '/images/cat12.jpg'},

    {uid: 'image13', src: '/images/cat13.jpg'},
    {uid: 'image14', src: '/images/cat14.jpg'},
    {uid: 'image15', src: '/images/cat15.jpg'},
    {uid: 'image16', src: '/images/cat16.jpg'},

    {uid: 'image17', src: '/images/cat17.jpg'},
    {uid: 'image18', src: '/images/cat18.jpg'},
    {uid: 'image19', src: '/images/cat19.jpg'},
    {uid: 'image20', src: '/images/cat20.jpg'}
  ]

</script>

<section id="slider">
  <div class="container">
      <div class="wrapper">
        <div>
          <!-- Slider -->
          <div class="my-slider">
            {#each images as image (image.uid)}
              <div class="slide">
                 <div class="slide-img-container">
                  <img src={image.src} alt="">
                  <!-- title of story goes here -->
                 </div>
              </div>
            {/each}
          </div>
        </div>
      </div>
  </div>
</section>

<style>
  #slider {
    position: absolute;
    left: 0;
  }

  .container {
    width: 1024px;
    margin: auto;
    overflow: hidden;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
  }

  .my-slider {
    width: calc(20 * 250px);
    height: 250px;
    display: flex;
  }

  .slide-img-container {
    height: 250px;
    width: 250px;
    cursor: pointer
  }

  .slide-img-container img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
</style>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-26 08:39:24

查看了库上的代码。我认为,因为您的滑块绝对定位在库中,这个CSS无法工作。

代码语言:javascript
运行
AI代码解释
复制
.tns-visually-hidden { position: absolute; left: -10000em; }

从代码判断,这应该是文本容器上的类。

我只是尝试将这个类添加到您自己的CSS中。

代码语言:javascript
运行
AI代码解释
复制
.tns-visually-hidden { display: none; }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73492442

复制
相关文章
Webpack 加载模块的规则
路径以 . 或 .. 打头,加载相对路径的模块。. 表示当前目录,.. 表示上层目录。 require('./foo.js') 将加载当前文件所在目录的 foo.js 的文件。
前端GoGoGo
2018/08/24
1.4K0
Angular中,模块加载的几种方法 原
好处:这种方式有利于初始减少加载体积 , 不需要在app.module.ts中,主动去引入相应的模块(它们自然不会打包到AppModule中去)。
申君健
2018/09/21
2.9K0
Angular中,模块加载的几种方法
                                                                            原
教程|在 Angular 4 中加载功能模块(下)
假设多个团队正在为此应用程序开发模块。您的离岸团队刚交付了 Weather 和 Currency 模块。您的任务是将新模块合并到主应用程序中。
疯狂的技术宅
2019/03/28
2.3K0
教程|在 Angular 4 中加载功能模块(下)
教程|在 Angular 4 中加载功能模块(上)
过去几年来,Angular 作为单页 Web 应用程序的开发框架变得越来越流行。尽管 Angular 4 最初是为 JavaScript 而设计的,但它在 Angular 2 基础之上添加了对更多语言的支持,比如 Dart 和 Typescript。
疯狂的技术宅
2019/03/28
2.3K0
教程|在 Angular 4 中加载功能模块(上)
angular2中在使用路由懒加载时候出现的错误
ERROR in Cannot use 'in' operator to search for 'providers' in null 出现这个问题的原因是,在使用懒加载的时候,没有指定module,没有找到相关的提供信息。 const routes: Routes = [ {path:'login',component:loginComponent}, { path: 'about', loadChildren: './home/home/home.module'},] 以上是修改之前报错的代码:
杭州前端工程师
2018/06/15
5.4K0
Angular 2 模块(Modules)
Angular 应用是模块化的,Angular 有自己的模块系统,叫做 Angular 模块 or NgModules。 模块 . 每个 Angular 应用至少有一个模块——根模块,通常叫做
孙亖
2018/06/06
9070
深入了解 webpack 模块加载原理
无论你开发使用的是 CommonJS 规范还是 ES6 模块规范,打包后的文件都统一使用 webpack 自定义的模块规范来管理、加载模块。本文将从一个简单的示例开始,来讲解 webpack 模块加载原理。
谭光志
2020/09/28
1.4K0
Angular中ngCookies模块介绍
1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie。内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短暂的。硬盘Cookie保存在硬盘里,有一个过期时间,除非用户手工清理或到了过期时间,硬盘Cookie不会被删除,其存在时间是长期的。所以,按存在时间,可分为非持久Cookie和持久Cookie。 主要因为HTTP协议无状态性,服务器需要知道用户在之前的页面做了哪些操作,所欲引入Cookie,是一种解决HT
八哥
2018/01/18
2.5K0
Angular中ngCookies模块介绍
webpack中的模块(modules)
在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块。
刘亦枫
2020/03/19
8030
webpack异步加载_webpack配置按需加载
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/01
1.1K0
angular2路由预加载
1. 实现PreloadingStrategy 类 import { PreloadingStrategy, Route } from "@angular/router"; import { Observable } from "rxjs"; /** * 预加载策略 */ export class SelectivePreloadingStrategy implements PreloadingStrategy { preload(route: Route, load: Function): O
用户1437675
2018/08/20
1K0
【Angular专题】——(2)【译】Angular中的ForwardRef
先做一个小声明,我们现在拥有一个AppComponent,并使用DI系统向其中注入了一个NameService,因为我们使用的是Typescript,所以需要做的工作就是在构造函数的参数中声明变量nameService的类型为NameService,这样做的目的是为了向Angular提供运行时解析依赖所需要的相关信息。
大史不说话
2018/12/27
3.3K0
【Angular专题】——(2)【译】Angular中的ForwardRef
Webpack插件按需加载组件_webpack懒加载
学习Vue的时候,各类教程都会告诉我们:Vue 的特点是SPA——Single Page Application(单页应用程序)。它有着诸如:“只有第一次会加载页面, 以后的每次页面切换,只需要进行组件替换;减少了请求体积,加快页面响应速度,降低了对服务器的压力” 等等优点。
全栈程序员站长
2022/11/08
1.5K0
Webpack插件按需加载组件_webpack懒加载
python中动态加载模块和类方法实现
> "D:\Python27\python.exe"  "D:\test\src\mytest.py" #module: <module 'mytest' from 'D:\test\src\mytest.py'> #c: mytest.TestClass #obj: <mytest.TestClass instance at 0x025F2AA8> <mytest.TestClass instance at 0x025F2AA8> test #mtd: <bound method TestClass.echo of <mytest.TestClass instance at 0x025F2AA8>> test #t: 3 1
py3study
2020/01/09
1.2K0
angular 路由懒加载_angular路由
在angular中路由即能加载组件又能加载模块,而我们说的懒加载实际上就是加载模块,目前还没有看到懒加载组件的例子。 加载组件使用的是component关键字 加载模块则是使用loadChildren关键字
全栈程序员站长
2022/11/08
1.3K0
webpack原理(2):ES6 module在Webpack中如何Tree-shaking构建
DCE 作用于模块内(webpack 的 DCE 通过 UglifyJS 完成),而 Tree-shaking 则是在打包的时候通过模块之间的信息打包必须的代码。
周陆军博客
2023/03/18
8040
Angular 2 中的绑定的方法在无限循环吗?
我在自己的Ionic 2项目中,使用卡片列出数据: <ion-card *ngFor="let item of inspects"> 卡片中有一个导航按钮,根据每项的数据生成连接打开百度地图,我是这样绑定的: 页面: <a [href]="nav(item)" target="_blank" ion-button icon-left clear small> <ion-icon name="pin"></ion-icon> <div>导航</div> </a> 代码:
孙亖
2018/06/07
4K0
在Linux下为Apahce加载rewrite模块
在开发时,经常会用到Apache的rewrite功能,如果你的Apache已经安装配置好了,这时需要加载rewrite模块的话,可以按照如下方法进行:
魏杰
2022/12/23
1.2K0
在Linux下为Apahce加载rewrite模块
Webpack 模块化原理和SourceMap
原创不易,未经作者允许禁止转载!! Webpack模块化 Webpack打包的代码,允许我们使用各种各样的模块化,但是最常用的是CommonJS、ES Module。 包括如下原理: CommonJS模块化实现原理; ES Module实现原理; CommonJS加载ES Module的原理; ES Module加载CommonJS的原理; CommonJS: 打包前 const { dateFormat, priceFormat } = require('./js/format'); console.
前端LeBron
2021/12/08
5400
Angular 启用预加载
在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候,会有一点延迟。
玖柒的小窝
2021/11/03
1.6K0
Angular 启用预加载

相似问题

错误:未找到-单击DB (Couchdb)时丢失

12

命令未找到

37

命令未找到

13

未找到命令

21

命令未找到

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档